среда, 20 февраля 2013 г.

Подключаем нестандартные шрифты. @Font-face для IE 9.

CSS3 позволяет легко и просто подключить нестандартный шрифт с помощью правила @font-face.
Вот так:

@font-face 
{
font-family: "MyFont"; /* Имя шрифта */
src: url(fonts/MyFont.ttf); /* Путь к файлу со шрифтом */
}
 P { font-family: MyFont; }

Для WebKit и Mozilla достаточно этого синтаксиса, но для совместимости с IE придётся повозиться.
Во-первых, IE не поддерживает шрифты в формате .ttf.
Для IE 6-8 версий нужен шрифт в формате .eot, для IE 9 нужен формат .woff.
Поэтому придется переконвертировать наш шрифт в два дополнительных формата, и наш код @font-face будет выглядеть вот так:

@font-face 
{
font-family: "MyFont";
src: url(fonts/MyFont.eot); /* for IE6-8 */
src: local("☺"), url(fonts/MyFont.ttf) format("truetype"), /* for Firefox 3, Safari */
url(fonts/MyFont.woff) format("woff"); /* for IE9 */ 
}

Обратите внимание на смайлик после local.
У меня в IE 9 не работал шрифт с любыми другими символами, кроме этого смайлика.
Подробно об этом чудо-смайлике можно прочесть здесь http://paulirish.com/2010/font-face-gotchas/#smiley

Есть еще одна проблема с woff шрифтом.
IIS 7 не знает такого типа файлов, для него нужно прописать вручную MIME-TYPE, причем тип я указала application/octet-stream , как и для файла .ttf.

5 комментариев: