TTF шрифты на веб-странице

Хотите использовать не стандартный шрифт на вашей веб-странице? Уже сейчас многие браузеры способны отображать TTF-шрифты, используя только CSS: последние версии Firefox, Opera, IE6, IE7, IE8 и Safari (Mac).

Форматы шрифтов

Шрифты могут быть в форматах TTF, OTF, EOT, SVG и WOFF:

  • Internet Explorer (все версии) — EOT;
  • Firefox (начиная с 3.5) — TTF/OTF/WOFF;
  • Opera (начиная с 10) — TTF/OTF;
  • Chrome (все версии) — SVG/TTF/OTF;
  • Safari (начиная с 3.2) — TTF/OTF.

Информация

Если вы хотите найти красивые TTF-шрифты, которые будут работать в нашем примере, просто посетите сайт Font Squirrel 2, где вы сможете загрузить TTF и EOT файлы в виде ZIP-архивов.

Таблица стилей выглядит следующим образом:


@font-face {
    font-family: 'ArtBrush Medium';
    src: url('Artbrush.eot');
    src: local('ArtBrush Medium'), local('ArtBrush-Medium'), url('Artbrush.ttf') format('truetype');
}
h1.fontface {font: 60px/68px 'ArtBrush Medium', Arial, sans-serif;letter-spacing: 0;}

Теперь все заголвки с классом fontface будут написаны нашим шрифтом ArtBrush Medium.

Протестировано в Firefox, Opera, IE6, IE7, IE8 и Safari (Mac). Браузеры, которые не поддерживают загрузку шрифтов, отобразят наш текст обычным Arial-шрифтом ☺.

Ссылки по теме

Вольный перевод ccsplay.co.uk

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

  • В «Ссылках по теме» данная информация раскрыта более подробно.

  • Следовало бы детальнее рассказать о браузерах, которые не поддерживают загрузку шрифтов и о режимах сглаживания этих шрифтов в разных браузерах