@font-face
Я сначала подумал ради прикола оформить эту статью при помощи comic sans MS, но потом решил вас пожалеть...
Но шутки комикам, а я сегодня буду писать о шрифтах, а точнее об их подключении на страницу. Для начала возьмем какой-нибудь бесплатный шрифт, например Marke Eigenbau. Это реальный восьмипиксельный шрифт, не смотря на название, и дальше я буду использовать его как пример.
Еще забыл оговориться, эта статья не касается sIFR, typeFace и cufon. Так что по ссылочкам сами походите, а я пока расскажу про нативный @font-face.
Теория простая - пишем в CSS правило:
@font-face {
font-family: 'MarkeEigenbau';
src: url('../fonts/MarkeEigenbau/MarkeEigenbau.ttf') format('truetype');
}
Все бы хорошо, но у нас есть целый зоопарк браузеров, форматов и лицензий поэтому все-всех, а страдаем мы. После консультации у Гугла выясняется, что достаточно все 4 формата чтобы все были довольны ttf, eot, woff, svg. Правим CSS, но не забываем что сотрудники компании MS каждый день усердно работают над тем чтобы нам было тяжелее работать.
@font-face {
font-family: 'MarkeEigenbau';
src: url('MarkeEigenbau.eot?#iefix') format('embedded-opentype'),
url('MarkeEigenbau.woff') format('woff'),
url('MarkeEigenbau.ttf') format('truetype'),
url('MarkeEigenbau.svg#MarkeEigenbau') format('svg');
}
Для пытливых: Похоже IE разбирает параметр src регуляркой c включенным квантификатором жадности и этот # обрывает паттерн.
Ой забыл что у нас нет всех этих файлов, тогда их можно нагенерить например белкой или фонт конвертером, но белка мне больше нравиться, потому что она еще и генерит CSS.
Для пытливых: Раньше белка вставляла в хеш после svg какую-то ересь типа webfontiGyDMQZD, но сейчас её попустило и она правильно вставляет туда имя шрифта.
Итак, на руках 4 файла и куча радости, но мы ж хотим не просто шрифт, а хотим жир, курсив, и жирный курсив, и чтоб удобно! Для начала скачиваем все это хозяйство и конвертим. Если вы используете белку то на выходе у вас 16 файлов шрифта и 16 правил для @font-face
@font-face {
font-family: 'MarkeEigenbauBold';
src: url('MarkeEigenbauBold.eot?#iefix') format('embedded-opentype'),
url('MarkeEigenbauBold.woff') format('woff'),
url('MarkeEigenbauBold.ttf') format('truetype'),
url('MarkeEigenbauBold.svg#MarkeEigenbauBold') format('svg');
font-weight: normal;
font-style: normal;
}
Я считаю это перебор, тем более не удобно каждый раз как нужен курсив использовать конструкцию с полным перечислением шрифтов.
.markerEigenbauBold {
font-family: 'MarkeEigenbauItalic' /*, [fallback]*/, sans-serif;
font-style: italic;
}
и все только потому что так нагенерила белка, поэтому правим
@font-face {
font-family: 'MarkeEigenbau';
src: url('MarkeEigenbauBoldItalic.eot?#iefix') format('embedded-opentype'),
url('MarkeEigenbauBoldItalic.woff') format('woff'),
url('MarkeEigenbauBoldItalic.ttf') format('truetype'),
url('MarkeEigenbauBoldItalic.svg#MarkeEigenbauBoldItalic') format('svg');
font-weight: bold;
font-style: italic;
}
Дышать явно стало проще потому что правил осталось 4 и они теперь не напрягают. Но что делать если вы вдруг захотели осчастливить пользователей Mac шрифтом Calibri, вам ведь не надо заставлять пользователей седьмой винды и висты качать его, поэтому добавляем еще локальное имя шрифта.
@font-face {
font-family: 'Calibri';
src: local('Calibri Bold Italic'),
url('CalibriBoldItalic.eot#iefix') format('embedded-opentype'),
url('CalibriBoldItalic.woff') format('woff'),
url('CalibriBoldItalic.ttf') format('truetype'),
url('CalibriBoldItalic.svg#CalibriBoldItalic') format('svg');
font-weight: bold;
font-style: italic;
}
Ну вот почти все, осталась маленькая деталь, а что если ваш сайт надежно защищен SSL, вы думаете это будет работать? Правильно, надо еще пошаманить с .htaccess, который достаточно положить в директорю со шрифтами.
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
А раз полезли в .htaccess то добавляем правильные mine-type
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-woff .woff
AddType image/svg+xml .svg
AddType application/octet-stream .afm
Вот вроде и все... А вывод такой: используйте Helvetica, не бодрите мозги :)
Свежие комментарии