qkowlew | WebFonts: о загружаемых на сайт собственных шрифтах... (Reply)

Технические подробности там

Дошли у меня вдруг руки до сайта Радио Духовный Антихрист, созданного в незапамятные времена и наполненного всякой всячиной, в том числе и по большей части на тему старообрядчества.

И обнаружил я, что применённая тогда технология загрузки шрифта "Ижица" в виде .PFR файла не то чтобы совсем не работает... Но на многих современных браузерах оно попросту не грузит букв помимо латиницы. Не говоря уже о том, что с точки зрения HTML валидатора FONTDEF это что-то не то...

Итогом поисков стало понимание, что если раньше, в эпоху HTML 3.2, было 2 технологии загрузки экзотических шрифтов - .EOT от Микрософта и .PFR - то теперь .PFR можно считать, что вымер, зато есть целых 2 новых технологии: WOFF и SVG. Самое же удивительное оказалось то, что .EOT шрифты всё так же работают в современных IE, утилита для генерации .EOT из .TTF созданная под 98 винду, до сих пор доступна для скачивания, и в микрософт это ДО СИХ ПОР НЕ ИСПОРТИЛИ!

Если у вас есть какие-то интересные РАБОТАЮЩИЕ добавления к моему тексту (под катом ниже) - пишите, буду рад дополнить.

Зачем?

Преимущества метода

гибкость — владелец сайта может как угодно менять любые тексты, а красивое оформления меню и заголовков не требует создания битмап-картинок в графических редакторах;
быстрая скорость загрузки — минимальное количество внешних файлов при любом количестве текста нестандартным шрифтом;
максимальная скорость работы сайта — ноль дополнительных элементов в DOM структуре, ноль скриптов и flash объектов, замедляющих сайт;
текст ведет себя как текст (ведь он же остается текстом), т.е. выделяется, реагирует на изменения цвета, жирности, начертания и т.п., идеальное СЕО;
довольно простая реализация даже с учетом оптимизаций шрифта.

Недостатки

не всеми браузерами поддерживается в полной мере. Хотя список уже очень достойный: IE 4+, Opera 10.5+, Firefox 3.5+, Chrome 2+, Safari 1+;
не бывает идеального кернинга пар букв в шрифте, и оформить отдельную надпись графическим элементом в фотошопе можно красивее;
та же "старославянская вязь", которую имитирует Izhitsa, характерна ещё и изменениями размеров и взаиморасположения букв в словах по вертикали, что неосуществимо простыми средствами стиля, но легко рисуется в графических программах
большой вес самого файла шрифта — может достигать нескольких мегабайт, и его уменьшение - отдельная весёлая задача;
пока подгружается шрифт, пользователь в одних браузерах (IE, Firefox, Opera) видит отображение текста обычным шрифтом, в других — вообще не видит текст (Safari, Chrome);
если вы заплатили за шрифт много денег, будет крайне обидно, если его утащат, а защититься от этого практически невозможно;
в разных браусерах могут наблюдаться мелкие баги рендеринга, особенно при наведении (:hover) — например, в Safari и Chrome не полностью перекрашивается текст

Как?

Вот у вас есть в наличии устраивающий вас шрифт IzhitsaRegular.ttf (для Windows). Для начала убедитесь в том, что отображение сайта с этим шрифтом вполне вас устраивает, и в нём нет пропущенных символов, используемых в текстах на сайте. Для этого установите шрифт себе в систему и пропишите в стиль сайта:
```
* { font-family: Izhitsa !important; }
```
После чего проверьте - всё ли хорошо на большей части страниц. Заметьте - на данной странице для заголовков применён шрифт Izhitsa, и хорошо видно, что в нём есть все русские буквы, но отсутствуют латинские N и n (см. ниже заголовки со словами Nokia, Windows, node.js).
Проверили - уберите шрифт из операционной системы и снова посмотрите на свой сайт, оставив вышеуказанную строку в стиле сайта. Шрифты на сайте должны поменяться на шрифт по умолчанию
Теперь уберите строку из стиля
Сконвертируйте ваш файл IzhitsaRegular.ttf в форматы: .eot .woff .svg
Залейте ВСЕ эти 4 файла в папку /fonts/ вашего сайта

Добавьте в стиль сайта следующие строки:

    @font-face {
        font-family: "Izhitsa";
        src: url("/fonts/IzhitsaRegular.eot");
        src: url("/fonts/IzhitsaRegular.eot?#iefix") format("embedded-opentype"),
             url("/fonts/IzhitsaRegular.woff") format("woff"),
             url("/fonts/IzhitsaRegular.ttf") format("truetype"),
             url("/fonts/IzhitsaRegular.svg#Izhitsa") format("svg");
        font-weight: normal;
        font-style: normal;
    }

Добавьте к тем элементам, которые Вы желаете видеть оформленными данным шрифтом, соответствующие определения стиля:
```
h1,h2,h3 { font-family: Izhitsa !important; }
```
Убедитесь в том, что у вас всё получилось

Sergej Qkowlew

Яковлев Сергей Сергеевич AKA Radahnar AKA Ночной Сторож AKA q Ex 2:5020/122

WebFonts: о загружаемых на сайт собственных шрифтах... (Reply)

WebFonts: о загружаемых на сайт собственных шрифтах...

Зачем?

Преимущества метода

Недостатки

Как?

Сайты с особенными шрифтами

Об этом другие пишут...

Конвертеры под Windows

Конвертеры под node.js

Онлайн конвертеры