Вступление
В первой части моей статьи ( http://www.sitepoint.com/how-to-use-cross-browser-web-fonts-part-1/ ) я ввел синтаксис веб-шрифта, глядя на то, как базовый @ font-face и синтаксис семейства шрифтов может работать вместе для встраивания пользовательских шрифтов в ваши веб-страницы и немного более сложную кросс-браузерную реальность.
В этой части мы пойдем дальше, рассмотрим общие проблемы реального мира, связанные с веб-шрифтами, и сравним бесплатные и платные варианты размещения ваших шрифтов.
В третьей части будут рассмотрены некоторые более продвинутые функции шрифтов CSS, такие как дефис и font-feature-settings.
Кросс-браузерные веб-шрифты — проблемы
Итак, у вас есть свои шрифты на вашем сервере и ваш кросс-браузерный код @ font-face на месте. Проверьте. Но твои проблемы могут не закончиться. В этом разделе я рассмотрю еще несколько проблем, с которыми вы можете столкнуться, а также предложенные решения.
Плохой рендеринг
Тестирование в разных браузерах имеет первостепенное значение: даже если вы не столкнетесь с какой-либо другой проблемой, рендеринг ваших шрифтов может быть просто плохим, особенно в IE и Opera на базе Chrome / Blink в Windows. Это может быть по разным причинам, но основными из них являются:
-
Использование ClearType: ClearType — это технология Windows, которая использует субпиксельный рендеринг, чтобы шрифты выглядели более плавными. Если этот параметр не включен, шрифты могут выглядеть очень плохо, хотя он включен по умолчанию в большинстве систем Windows (позже, чем в XP). Он по-прежнему не так эффективен, как сглаживание Mac OSX. Обратите внимание, что другие браузеры в Windows не страдают так сильно, как они имеют собственные субпиксельные системы рендеринга. Для получения дополнительной информации прочитайте «Тип отображения и растровые войны» Джона Тана ( http://v1.jontangerine.com/log/2008/11/display-type-and-the-raster-wars )
-
Рендеринг веб-шрифтов Google некоторое время был испорчен в движке рендеринга Blink по разным причинам: посмотрите следующий отчет об ошибке для саги ( https://code.google.com/p/chromium/issues/detail? id = 137692 )
-
Некоторые шрифты (скорее всего бесплатные) могут иметь небольшое количество доступных глифов, что означает, что когда вы используете в своем контенте символ, для которого глиф недоступен в используемом вами шрифте, вы получите неприятный сюрприз рендеринга, такой как пустые места страшных уродливых квадратов гибели вместо ожидаемых персонажей. Чтобы смягчить такие негативные эффекты, вы должны всегда включать в стек резервный шрифт, даже если вы, например, используете веб-шрифт.
font-family: 'Abril Fatface Regular', arial, sans-serif;FOUT
FOUT расшифровывается как Flash из Unstyled Text, и — хотя это больше не является проблемой, затрагивает только ранние версии Firefox и Opera и IE <10 — вы все равно можете столкнуться с этим и захотеть что-то с этим сделать. Это происходит, когда на странице появляется текст без стиля, когда HTML-код загружен, а веб-шрифт еще не сделан.
Существует ряд библиотек и методик, связанных со шрифтами, для работы с FOUT, многие из которых упоминаются в «Борьбе с @ font-face FOUT» ( http://www.paulirish.com/2009/fighting-the). -font-face-fout / ). Я лично нашел наиболее надежную технику — загрузчик веб-шрифтов Google ( https://developers.google.com/fonts/docs/webfont_loader ). Он содержит JavaScript, который определяет, загружены ли ваши веб-шрифты, и применяет классы к тегу документа, чтобы указать их статус. Вы можете использовать их, чтобы скрыть элементы, пока их шрифты не загрузятся, например:
.wf-loading h1 {
visibility: hidden;
}
Затем, когда требуемый шрифт загружен, к тегу добавляется определенный класс, и вы можете соответствующим образом обновить отображение элемента:
.wf-lobster-n4-active h1 {
visibility: visible;
font-family: lobster;
}
Высокая пропускная способность
Добавление веб-шрифтов на вашу страницу, очевидно, будет означать снижение производительности, которое во многих случаях будет незначительным, поскольку веб-шрифт, вероятно, будет составлять около 50-100 КБ (как очень грубое предположение!). Следует ограничить количество используемых вами шрифтов для каждого страница из соображений пропускной способности и производительности, но даже один шрифт может быть очень большим, особенно если это шрифт CJK ( http://en.wikipedia.org/wiki/CJK ), который может содержать тысячи глифов.
Чтобы смягчить эту проблему, вы можете:
- Создайте измененный файл шрифта, содержащий только те символы, которые вам нужны. Для этого вам нужен редактор шрифтов, такой как Font Forge ( http://fontforge.org/ ).
- Укажите только те символы, которые вы хотите использовать из файла шрифтов, используя свойство unicode-range внутри вашего блока @ font-face, который мы видели в последней части моей серии. Например:
@font-face {
font-family: 'Abril Fatface';
src: url("AbrilFatface.otf");
unicode-range: U+0026;
}
Это указывает на загрузку только символа амперсанда из шрифта (см. Http://www.w3.org/TR/css3-fonts/#unicode-range-desc для получения дополнительной информации об указании нескольких символов, включая диапазоны). unicode-range Если вы хотите использовать unicode-range в Firefox или более старых браузерах, вы можете использовать полифилл, такой как jquery-unicode-range ( https://github.com/infojunkie/jquery-unicode-range ).
Браузерные ошибки и особенности
Ради интереса я также хотел бы упомянуть несколько ошибок в браузере.
IE9 ошибка с загрузкой EOT
Если вы используете пуленепробиваемый синтаксис @ font-face, который мы исследовали в предыдущей статье, IE9 и более поздние версии загрузят EOT-версию шрифта и будут использовать ее, что немного болезненно.
Ошибка междоменного шрифта
Согласно спецификации, вы не можете загружать шрифты из другого домена в ваш CSS (хотя Chrome, Safari и Opera ошибочно допускают это.) Чтобы обойти это ограничение, вы можете рассмотреть использование CORS (см. Http: //dev.opera. ru / article / view / dom-access-control-using-cross-origin-resource-share / )
IE 6-8 загружает шрифты, которые объявлены и не используются
Вы никогда не должны объявлять правила @ font-face для шрифтов, которые вы не используете на своей странице; IE6-8 все равно их скачает.
Обслуживание шрифтов с сервера IIS
Если вы обслуживаете шрифты с сервера IIS, вам нужно добавить «.woff» с MIME-типом «application / x-font-woff» в вашу установку IIS, даже если у WOFF нет MIME-типа , IIS отказывается обслуживать все, для чего у него нет типа MIME.
Самостоятельный хостинг или хостинг
Обсудив причуды и ошибки @ font-face, давайте завершим эту статью кратким обзором некоторых различных вариантов приобретения и размещения шрифтов. Самостоятельное размещение шрифтов обходится дороже с точки зрения пропускной способности и требует более сложной настройки, но вы, как правило, получаете более точный контроль над реализацией шрифтов на своих сайтах. С другой стороны, использование размещенного сервиса быстрее настраивается (сервис обрабатывает все кросс-браузерные особенности и т. Д. Для вас), а кто-то другой размещает шрифты для вас.
Примечание: некоторые механизмы здесь бесплатны, а некоторые платные. Существует целый ряд высококачественных бесплатных ресурсов для шрифтов, но вы получаете то, за что платите: даже высококачественные бесплатные шрифты, как правило, страдают из-за ограниченного набора символов или доступных вариантов или просто из-за чрезмерного использования в веб. Если вы хотите что-то глубокое и действительно оригинальное для вашей публикации, вам лучше поискать платное решение.
Я рекомендую бесплатные источники шрифтов: Font Squirrel ( http://www.fontsquirrel.com/ ), Da Font ( http://www.dafont.com/ ), Лига подвижного типа ( http: // www. theleagueofmoveabletype.com/ ) и Lost Type ( http://www.losttype.com/browse/ ). Лучшие бесплатные шрифты для дизайнеров от Jad Limcaco ( http://www.smashingmagazine.com/2011/07/19/best-free-fonts-designers/ ) содержит еще несколько предложений и полезных советов.
Платные источники шрифтов, которые я бы рекомендовал: Hoefler и Frere-Jones ( http://www.typography.com/ ), Linotype ( http://www.linotype.com/ ) и House Industries ( http: //www.houseind). .com / ). Есть также много других хороших источников!
Google Fonts
Google Fonts — это бесплатная служба шрифтов, доступная по адресу http://www.google.com/fonts . Это отличный сервис с приемлемыми качественными шрифтами и очень простой в использовании; отлично подходит для написания быстрых и грязных демонстраций и создания сайта с ограниченным бюджетом. Он страдает от тех же проблем, что и любой бесплатный ресурс шрифтов: некоторые из лучших шрифтов чрезмерно используются, а параметры, которые вы получаете, весьма ограничены.
Платные услуги шрифтов
В настоящее время существует несколько платных сервисов размещения шрифтов, и все они работают одинаково. Вы вообще:
- Записаться на сервис
- Укажите домены, на которых вы хотите использовать свои шрифты
- Укажите шрифты, которые вы хотите использовать
- Вставьте свой собственный CSS, а иногда и JavaScript на свой сайт, который обрабатывает кодирование @ font-face и font-family
- Проверьте свой выбор шрифта так или иначе
- Платите за шрифты, когда ваши сайты запускаются, как правило, за шрифт, за сайт, за год.
Я испробовал ряд этих услуг, но две мои любимые следующие:
- Typekit ( https://typekit.com/ ): сервис, принадлежащий Adobe, с немного дорогими планами использования, который охватывает несколько сайтов и использование шрифтов, и хорошо работает для более масштабных операций. Вы также можете получить ограниченный бесплатный план, который достаточно хорош для тестирования, но только два шрифта одновременно.
- Font Deck ( http://fontdeck.com/ ): независимая компания из Великобритании, предлагающая бесплатный план, который позволяет тестировать несколько шрифтов на сайт, но только при доступе к ограниченному количеству IP-адресов. Производственные шрифты стоят около $ 7,50 за шрифт в год. Мне этот сервис нравится чуть больше, потому что я нашел функциональность тестирования более полезной, и они также предлагают несколько хороших функций шрифта opentype.
Примечание. Служба веб-шрифтов Дэна Идена: хорошее, плохое и уродливое the-ugly / ) — хорошая статья с дополнительной информацией о сервисах веб-шрифтов.
Преимущества, как правило, становятся очевидными, когда вы начинаете пользоваться такими услугами: у вас будет доступ к высококачественным шрифтам с полным набором глифов и несколькими предлагаемыми весами и вариантами. Вы также сможете найти шрифты opentype с доступными функциями opentype, такими как стилистические штрихи и лигатуры, которые можно использовать в Интернете с помощью свойства nascent font-feature-settings. Это одна вещь, которую мы рассмотрим в третьей части серии.