@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, не бодрите мозги :)

5 Комментарии “@font-face

  1. я тебе сдам страшную тайну, я тут хочу выложить (уже пол года хочу) статью о том как верстать письма. так вот там до сих пор надо/можно/полезно употреблять свойства 4го html’a такие как backgroundcolor и hspace о которых все забыли еще пару лет назад. и верстать все на таблицах. так что память о том как БЫЛО еще не выветрилась)

  2. Лолик, такой сервис есть не только у Гугла, вот недавно Адоб себе прикупил

Комментарии закрыты