Внедрение @ font-face с конца 2012 г.

Я провел несколько вечеров, исследуя лучший способ реализации @ font-face в современных браузерах. Я постоянно работаю веб-разработчиком / системным разработчиком с опытом работы в качестве графического дизайнера. Я считаю, что возможности и возможности веб-дизайна становятся все более интересными. Итак, я провел небольшое тестирование и хотел бы услышать, есть ли у кого-нибудь советы, лучшие идеи или предложения по этому поводу. Мой сценарий тестирования выглядит так.

Я тестировал МНОГО различных онлайн-инструментов и приложений, но в конце концов я свел это к одной онлайн-службе и одному приложению.

FontSquirrel, онлайн-инструмент - бесплатно. http://www.fontsquirrel.com/fontface/generator
FontXChange, приложение для mac / win - 99 $. http://fontgear.net/fontxchange.html.

Я использовал шрифт, который поставлялся с моим Mac, Tamil Sangam MN и Tamil Sangam MN Bold, оба были открытого типа, .otf.

TamilSangamMN.otf - 290 КБ
TamilSangamMNBold.otf - 271 КБ

Изучение размеров конверсии

FontSquirrel

Это хороший онлайн-инструмент, он очень хорош. Есть несколько разных режимов, я использовал Базовый и Оптимальный. Результатом моего файла .otf были svg, ttf, eot и woff.

Базовый

Обычный

TamilSangamMN.svg 233 КБ
TamilSangamMN.ttf 71 КБ
TamilSangamMN.eot 25 КБ
TamilSangamMN.woff 30 КБ
Всего: 359 КБ

Полужирный

TamilSangamMNbold.svg 225 КБ
TamilSangamMNbold.ttf 69 КБ
TamilSangamMNbold.eot 25 КБ
TamilSangamMNbold.woff 30 КБ
Всего: 349 КБ

Оптимально

Первое, что я заметил с оптимальными шрифтами, это то, что они значительно меньше базовых вариантов ~ 260 КБ!

Обычный

TamilSangamMN.svg 33 КБ
TamilSangamMN.ttf 25 КБ
TamilSangamMN.eot 15 КБ
TamilSangamMN.woff 17 КБ
Всего: 90 КБ

Полужирный

TamilSangamMNbold.svg 33 КБ
TamilSangamMNbold.ttf 25 КБ
TamilSangamMNbold.eot 15 КБ
TamilSangamMNbold.woff 17 КБ
Всего: 90 КБ

FontXChange

Этот инструмент может делать гораздо больше, чем просто манипулировать шрифтами для Интернета. Он может конвертировать несколько форматов между собой; такие как opentype, true type, веб-шрифты, почтовый скрипт и так далее. Результатом является очень высокое качество файлов, размер файлов почти в два раза больше, чем у версий FontSquirrels Basic, и более чем в 7 раз больше, чем у версии FontSquirrels Optimal.

Обычный

TamilSangamMN.svg 480 КБ
TamilSangamMN.ttf 72 КБ
TamilSangamMN.eot 72 КБ
TamilSangamMN.woff 80 КБ
Всего: 704 КБ

Полужирный

TamilSangamMNbold.svg 463 КБ
TamilSangamMNbold.ttf 69 КБ
TamilSangamMNbold.eot 70 КБ
TamilSangamMNbold.woff 80 КБ
Всего: 682 КБ

Настройка CSS

Вначале меня немного озадачило, что реальный порядок в списке шрифтов имеет значение. Затем я обнаружил, что некоторые берут первый формат, который они считают совместимым, а не придерживаются оптимального формата - и это отстой. После некоторых лабораторных работ я обнаружил, что это оптимальный способ форматирования CSS (обратите внимание на порядок типов файлов | важно!).

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

Мои результаты тестов

Обычные шрифты

Я отметил лучшую версию знаком *

Firefox MAC (15.0.1)

FontSquirrel Optimal: немного увеличивает жирность
FontSquirrel Basic: немного увеличивает жирность
FontXChange 4.0: отображается немного жирно, но кернинг лучше, чем в версии FontSquirrel *

Firefox Windows (15.0.1)

FontSquirrel Optimal: очень красиво отображается
FontSquirrel Basic: шрифт неровный / прерывистый
FontXChange 4.0: отлично отображается *

Safari Mac (6.0)

FontSquirrel Optimal: идеальный рендеринг
FontSquirrel Basic: идеальный рендеринг
FontXChange 4.0: идеальный рендеринг *

Chrome Mac (21.0)

FontSquirrel Optimal: немного толстоват
FontSquirrel Basic: немного толстоват
FontXChange 4.0: идеальный рендеринг *

Chrome Windows (21.0)

FontSquirrel Optimal: идеальный рендеринг
FontSquirrel Basic: идеальный рендеринг
FontXChange 4.0: идеальный рендеринг *

Internet Explorer (9.0)

FontSquirrel Optimal: идеальный рендеринг *
FontSquirrel Basic: идеальный рендеринг
FontXChange 4.0: шрифт неровный / прерывистый

Полужирный шрифт

Firefox MAC (15.0.1)

FontSquirrel Optimal: очень толстый *
FontSquirrel Basic: отображает очень толстый
FontXChange 4.0: отображает очень толстый, но лучший кернинг (я бы хотел выбрать этот вариант для Mac, но поскольку версия firefox для Windows здесь несовместима, ее нужно убрать)

Firefox Windows (15.0.1)

FontSquirrel Optimal: отображается нормально, без сглаживания *
FontSquirrel Basic: шрифт неровный / прерывистый
FontXChange 4.0: шрифт немного искажается / зазубрен.

Safari Mac (6.0)

FontSquirrel Optimal: идеальный рендеринг *
FontSquirrel Basic: идеальный рендеринг
FontXChange 4.0: отображает жирность

Chrome Mac (21.0)

FontSquirrel Optimal: идеальный рендеринг *
FontSquirrel Basic: хороший рендер, жирность несколько процентов.
FontXChange 4.0: отображает жирность

Chrome Windows (21.0)

FontSquirrel Optimal: идеальный рендеринг *
FontSquirrel Basic: идеальный рендеринг
FontXChange 4.0: рендеринг очень толстый

Internet Explorer (9.0)

FontSquirrel Optimal: идеальный рендеринг *
FontSquirrel Basic: идеальный рендеринг
FontXChange 4.0: шрифт неровный / прерывистый

Окончательная реализация

Обычно я размещаю свои веб-шрифты по следующему шаблону: ‹webfonts› / ‹источник преобразования› / ‹метод преобразования› / ‹fonts›

/* Regular */
@font-face {
    font-family: 'TamilSangam';
    src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn.eot');
    src: url('webfonts/fontxchange/TamilSangamMN.svg#TamilSangamMN') format('svg'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn.eot?#iefix') format('embedded-opentype'),
         url('webfonts/fontxchange/TamilSangamMN.woff') format('woff'),
         url('webfonts/fontxchange/TamilSangamMN.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Bold */
@font-face {
    font-family: 'TamilSangam';
    src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.eot');
    src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.svg#tamil_sangam_mnbold') format('svg'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.eot?#iefix') format('embedded-opentype'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.woff') format('woff'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

Графический обзор результата (полный размер на https://i.stack.imgur.com/atb98.png)

введите описание изображения здесь

Выводы и квесты

Нет ни одного инструмента, который предоставил бы шрифты, которые хорошо отображались бы на Mac и Windows во всех браузерах. Вы должны экспериментировать и тестировать каждый шрифт. Приведенная выше методология - это простой способ и предложение, как протестировать и поэкспериментировать с @ font-face.

Есть ли что-нибудь, что, по вашему мнению, я могу изменить в своих методах или реализации, есть ли какое-либо приложение или услуга, которые я пропустил?

Всего наилучшего / Т

Eric Herlitz 21.09.2012 источник

comment

У вас есть актуальный вопрос или проблема, которую нужно решить? Похоже, вы просто делитесь результатами некоторых исследований и реализаций, не задавая конкретных вопросов, а просто ищите мнения. Это кажется более подходящим для блога, чем для сайта вопросов и ответов. - BoltClock 22.09.2012

comment

Обновился с более конкретным вопросом - Eric Herlitz 22.09.2012

comment

Я, например, приветствую ваш обстоятельный пост. - verism 30.12.2012

comment

Это отличный список. К сожалению, для IE8 это не работает. Итак, мне пришлось переместить .eot?#iefix строки над .svg#TamilSangamMN строками. Я получил это из другого вопроса stackoverflow о font-face и IE8. - yitwail 30.12.2012

Ответы (1)

arrow_upward
4
arrow_downward

@ код шрифта

Вы можете добавить src: local('ò?'),, который ищет локальный шрифт с этим именем, заставляя браузер игнорировать локальные шрифты, если они имеют то же имя, что и ваш пользовательский шрифт. Вы также можете использовать это наоборот, чтобы ограничить загрузку пользовательских шрифтов. см. службу поддержки для мобильных устройств

Обычно я вижу строку ?#iefix второй после стандартной .eot src, хотя я не могу сказать, что она мне когда-либо была нужна, и не знаю, требуется ли конкретное позиционирование (кроме того, что .eot указывается первым).

Дополнительный контроль над шрифтами

Если вы ищете больше контроля со шрифтами в сценарии, когда шрифты не загружаются, или имеете дело с FOUC в IE, у меня есть плагин jQuery, который позволит вам скрыть шрифты во время их загрузки и позволит вам изменить шрифт. размер при ошибке, чтобы резервный шрифт не разрушил ваш макет. Как узнать, что шрифт (@ font-face) уже загружен?

Ошибка IE6-8

Кроме того, IE6-8 может иметь проблемы с файлом .eot некоторых шрифтов. Это можно исправить одним из следующих способов (полное руководство здесь):

Конвертация нового файла .eot в режиме онлайн. Если это не сработает, проблема в самих свойствах файла.
Используйте FontForge, чтобы отредактировать свойства имени файла шрифта, затем повторно сохраните и повторно сконвертируйте.

CORS

Кажется, относится только к IE и FF. Все остальные браузеры (протестированы только последние версии) не имеют проблем.

CORS - распространенная проблема со шрифтами, которая возникает, когда вы загружаете шрифты из другого домена или другого имени хоста. Это включает в себя указание вашего сайта с www или без. На код @font-face нужно ссылаться, как и на файл CSS. У вас также возникнут проблемы при определении тега <base> в вашем html. Если это невозможно или если вы не хотите беспокоиться о CORS, вам необходимо поместить следующий код в файл .htaccess в каталоге шрифтов:

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

Типы MIME

Проблемы 404 при обслуживании шрифтов могут быть вызваны неправильными определениями MIME, подробнее см. Здесь: Mime-тип для шрифтов WOFF ?

Мобильная поддержка

Мобильная поддержка очень плохая. Android не поддерживает его до 4.0, а Windows Mobile, насколько мне известно, не поддерживает его вообще. Я изучаю возможные способы решения этой проблемы. Лучшее, что у меня есть, - это использовать Как узнать, загружен ли уже шрифт (@ font-face)?, чтобы отобразить изображение текста при сбое загрузки шрифта. Это действительно работает только для заголовков и значков сайтов, в противном случае это ужасно плохой обходной путь, плохой для SEO и плохой UX.

См. @font-face поддержку.

Кроме того, версии Android 2.2 - x.x.x не будут работать, если ваш @font-face использует local(), который также используется в качестве исправления для IE. Если вы хотите охватить все свои основы, может потребоваться несколько таблиц стилей. Подробнее см. Здесь: https://stackoverflow.com/a/4520467/1455709

SVG и Chrome

Chrome не будет использовать шрифт SVG, если вы включите #fontName в URL-адрес. Он также будет использовать WOFF перед SVG - и не очень хорошо его отображает. Вероятно, это причина того, что все так недовольны плохим рендерингом шрифтов в Chrome ... Чтобы преодолеть это, требуется дополнительное объявление @ font-face:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'myFont';
        src: url('fonts/myFont.svg') format('svg');
    }
}

Patrick 22.09.2012

Внедрение @ font-face с конца 2012 г.

Изучение размеров конверсии

FontSquirrel

Базовый

Оптимально

FontXChange

Настройка CSS

Мои результаты тестов

Обычные шрифты

Полужирный шрифт

Окончательная реализация

Выводы и квесты

Ответы (1)

@ код шрифта

Дополнительный контроль над шрифтами

Ошибка IE6-8

CORS

Типы MIME

Мобильная поддержка

SVG и Chrome

Вопросы по теме