qkowlew (qkowlew) wrote,
qkowlew
qkowlew

Categories:

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

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

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

И обнаружил я, что применённая тогда технология загрузки шрифта "Ижица" в виде .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 не полностью перекрашивается текст

Как?

  1. Вот у вас есть в наличии устраивающий вас шрифт IzhitsaRegular.ttf (для Windows). Для начала убедитесь в том, что отображение сайта с этим шрифтом вполне вас устраивает, и в нём нет пропущенных символов, используемых в текстах на сайте. Для этого установите шрифт себе в систему и пропишите в стиль сайта:
    * { font-family: Izhitsa !important; }
    
    После чего проверьте - всё ли хорошо на большей части страниц. Заметьте - на данной странице для заголовков применён шрифт Izhitsa, и хорошо видно, что в нём есть все русские буквы, но отсутствуют латинские N и n (см. ниже заголовки со словами Nokia, Windows, node.js).
  2. Проверили - уберите шрифт из операционной системы и снова посмотрите на свой сайт, оставив вышеуказанную строку в стиле сайта. Шрифты на сайте должны поменяться на шрифт по умолчанию
  3. Теперь уберите строку из стиля
  4. Сконвертируйте ваш файл IzhitsaRegular.ttf в форматы: .eot .woff .svg
  5. Залейте ВСЕ эти 4 файла в папку /fonts/ вашего сайта
  6. Добавьте в стиль сайта следующие строки:
        @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;
        }
    
  7. Добавьте к тем элементам, которые Вы желаете видеть оформленными данным шрифтом, соответствующие определения стиля:
    h1,h2,h3 { font-family: Izhitsa !important; }
    
  8. Убедитесь в том, что у вас всё получилось

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

Радио Духовный Антихрист

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

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

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

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

[Under Construction]
Tags: интернет, софт, техника, хорошее
Subscribe

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 2 comments