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-шрифтом ☺.

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

• Павел Ловцевич – @font-face или назад в будущее
• Вадим Макеев – Веб-шрифты vs. Шрифты для веба
• Александр Бойченко – Веб-шрифты vs. Шрифты для веба и IE6
• Юрий Артюх – font-face оживление
• Шрифтовая белка

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

CSS HTML Дизаин