@ font-face: Самый простой способ использовать пользовательские шрифты на вашем веб-сайте

  1. Вступление
  2. Выбор правильного шрифта
  3. Генерация необходимых файлов
  4. Реализация @ font-face
  5. Настройка производительности и особенности браузера
  6. Размер файла
  7. Подменю
  8. Gzip
  9. Причуды Internet Explorer
  10. Целевые загрузки
  11. Кодировка URI
  12. Местный SRC
  13. тестирование
  14. Заключение

Blue Fish Development Group

Вступление

Креативная типография уже давно недоступна большинству дизайнеров в сети. Мы застряли на одних и тех же старых скучных шрифтах, установленных на всех машинах: Arial, Times New Roman, Georgia и т. Д. Однако последние достижения в области браузерной технологии и типографских инструментов открывают нам новые возможности. При наличии лицензии на шрифт, с минимальными усилиями, вы можете выбирать из сотен шрифтов и при этом поддерживать 90% -95% современных браузеров без особых усилий. Эта статья расскажет вам, как.

Выбор правильного шрифта

Если у вас есть полномочия выбирать шрифт, который используется в вашем проекте, то ваш первый шаг является наиболее важным - выбор шрифта с соответствующей лицензией. Это может быть сложным вопросом, поэтому, если вы хотите идти по пути наименьшего сопротивления, тогда идите прямо к Шрифт Белка и выберите один из шрифтов, предлагаемых на их сайте. Все они бесплатны для коммерческого использования в печатном виде или в Интернете. Хотя в Интернете есть и другие источники бесплатных шрифтов, некоторые имеют сомнительное качество. Также имейте в виду, что бесплатное использование для ПК не обязательно означает бесплатное использование в Интернете. Font Squirrel проделал тяжелую работу по поиску шрифтов со всей сети, которые не только бесплатны для использования в сети, но и отличаются высоким качеством.

Рисунок 1: Font Squirrel - отличный источник бесплатных шрифтов и Генератор @ font-face
Рисунок 1: Font Squirrel - отличный источник бесплатных шрифтов и Генератор @ font-face

Если вы не можете найти правильный шрифт в Font Squirrel, вам не повезло. Некоторые литейные заводы предлагают коммерческие лицензии на веб-шрифты, но обязательно внимательно ознакомьтесь с Лицензионным соглашением с конечным пользователем (EULA). В лицензии необходимо разрешить так называемое связывание незашифрованных (или необработанных) шрифтов (.ttf, .otf, .woff), чтобы выполнить действия, описанные в этой статье.

Генерация необходимых файлов

Есть много разных способов загрузить необходимые файлы и код из Font Squirrel, но я собираюсь показать вам самый простой и безопасный метод, который будет работать с 90% -95% всех браузеров. Как только вы выбрали шрифт на Font Squirrel, загрузите его на рабочий стол. Font Squirrel предлагает расфасованные комплекты @ font-face , но в этом случае мы просто собираемся загрузить файл TTF или OTF, потому что набор @ font-face для нас больше не нужен. Вы можете просто просмотреть все шрифты, пока не найдете тот, который вам нравится, а затем загрузить файл .ttf или .otf.

Рисунок 2: Загрузка шрифта Font Squirrel против загрузки Kit
Рисунок 2: Загрузка шрифта Font Squirrel против загрузки Kit

После загрузки файла TTF или OTF посетите их веб-инструмент @ font-face Generator. Здесь мы загрузим наш шрифт, выберем некоторые параметры и загрузим некоторые сгенерированные файлы. Итак, после загрузки вашего шрифта (в нашем примере ниже «Daniel Regular»), вот варианты, которые мы хотим сделать:

Рисунок 3: Генератор Font Squirrel @ font-face
Рисунок 3: Генератор Font Squirrel @ font-face

Реализация @ font-face

Нажмите на кнопку «Download your Kit», и Font Squirrel создаст пять файлов - три файла шрифтов, таблицу стилей CSS и демонстрационный HTML-файл. Загрузите файлы шрифтов (.eot, .ttf и .woff) на свой сервер - это файлы шрифтов, на которые вы будете ссылаться. Файлы HTML и CSS - это просто демонстрационные файлы, которые помогут вам правильно оформить разметку. Файл CSS имеет два правила - давайте посмотрим на них:


@ font-face {
семейство шрифтов: 'DanielRegular';
формат src: url (// :) ('no404'), формат url ('daniel.woff') ('woff'), формат url ('daniel.ttf') ('truetype');
}
@ font-face {
семейство шрифтов: 'DanielRegular';
src: url ('daniel.eot');
}

Первое правило предназначено для всех браузеров, кроме Internet Explorer, а второе - только для Internet Explorer. Идите вперед и добавьте первое правило к своей основной таблице стилей. Затем создайте вторую таблицу стилей только для IE и добавьте туда второе правило. В заголовок документа включите свою основную таблицу стилей, а затем свою таблицу стилей IE, используя условные комментарии. Например:


<link rel = "stylesheet" type = "text / css" href = "style.css" media = "screen" />
<! - [if IE]> <link rel = "stylesheet" type = "text / css" href = "style-ie.css" media = "screen" /> <! [endif] ->

Так что здесь происходит? Отдельные таблицы стилей и условные комментарии гарантируют, что каждый браузер обслуживается в правильном формате шрифта. Первое свойство внутри правила @ font-face - это то, где мы определяем имя шрифта. Мы можем называть это как угодно, и в этом случае мы будем называть это «DanielRegular».

Во второй строке мы определяем местоположение файла шрифта. В случае IE это шрифт EOT.

Для всех остальных браузеров вторая строка немного интереснее. Он имеет три пары значений, разделенных запятыми. Первая пара значений на самом деле является небольшим заблуждением для Internet Explorer. Обычно IE пытается загрузить файлы TTF и WOFF, которые он на самом деле не может использовать. Это создает ненужный HTTP-запрос, который мы хотели бы избежать. Синтаксис первой пары значений приведет к тому, что IE выйдет из строя и просто использует уже определенный файл EOT, а другие браузеры просто проигнорируют его и продолжат работу. Вторая пара значений - это файл шрифта WOFF, который будет использоваться, если браузер его поддерживает (в настоящее время только Firefox 3.6). Третья пара значений - это True Type Font, который будет использоваться Safari, Chrome, Opera и Firefox 3.5.

После добавления правил @ font-face в ваш CSS, вы готовы к работе. Теперь, когда вы определяете семейство шрифтов в другом месте вашего CSS, вы можете использовать «DanielRegular» следующим образом:

.title {font-family: DanielRegular, Arial, Sans-Serif;}

Это оно! Этот метод поддерживает Internet Explorer 4+, Firefox 3.5+, Safari 3.1+, Chrome 4+ и Opera 10+. Это примерно 90-95% всех браузеров, и это число будет только расти. Если вам важно закрыть этот последний 10% разрыв, прочитайте нашу сопутствующую статью Реалии веб-шрифтов - пример внедрения пользовательских шрифтов на современный веб-сайт ,

Настройка производительности и особенности браузера

У вас есть все, что вам нужно, чтобы начать использовать веб-шрифты на вашем сайте в этот момент. Однако есть некоторые дополнительные настройки производительности, которые вы можете выполнить, и есть некоторые опасности, о которых вам следует знать.

Поскольку ваш пользовательский шрифт предварительно не установлен на компьютере конечного пользователя, он должен быть загружен с вашего сервера в браузер пользователя, что может вызвать FOUT или Flash Of Unstyled Text. ПОИСК происходит, когда шрифты загружаются в первый раз. В зависимости от браузера пользователь может видеть либо пробел, либо шрифт по умолчанию, пока загрузка не будет завершена. Поэтому важно минимизировать время загрузки, чтобы исключить или хотя бы сократить продолжительность FOUT.

Размер файла

Первое, что нужно учитывать, это размер файла. Типичный размер шрифта составляет около 50 КБ данных. Добавьте жирные и косые грани, и вы получите 150 КБ данных, которые пользователь должен загрузить. Поэтому убедитесь, что каждый используемый вами шрифт принесет пользователю достаточную ценность, чтобы оправдать дополнительное время загрузки. После того, как вы определились с гранями шрифтов, следующие методы могут помочь уменьшить размер их файлов.

Подменю

Типичный шрифт лица может иметь сотни глифов или символов. В дополнение к стандартному латинскому алфавиту, есть цифры, символы, акцентированные символы, иностранные языки и т. Д. Поднаборы позволяют вам выбрать только часть общих глифов для включения в файл шрифтов. Процесс поднабора упрощается генератором Font Squirrel @ font-face. По умолчанию генератор будет использовать подмножество Mac Roman, что более чем достаточно для большинства случаев использования. Однако, если ваш веб-сайт будет отображать только английские буквы и цифры, вы должны выбрать подмножество Basic Latin, сократив количество глифов пополам и уменьшив размер файла шрифта. В нашем примере выше, наш шрифт был уменьшен с 53 КБ до 37 КБ только путем подстановки в Basic Latin.

Gzip

Помимо поднабора вы можете настроить сервер для доставки шрифтов, используя Сжатие Gzip (WOFF и EOT уже сжаты, так что нет необходимости Gzip те) с будущим сроком годности. Gzip еще больше уменьшит размер файла, а срок его действия гарантирует, что браузер пользователя будет кешировать шрифты после начальной загрузки. Gzip может сэкономить от 25% до 50% размера файла, так что оно того стоит.

Причуды Internet Explorer

Есть несколько особых мер предосторожности, которые необходимо предпринять для Internet Explorer. Во-первых, убедитесь, что все шрифты, связанные в вашем CSS, фактически используются на вашем сайте. Internet Explorer загрузит все файлы, связанные с вашим файлом CSS, независимо от того, используются они на самом деле или нет.

Во-вторых, убедитесь, что ваше правило @ font-face определено до того, как встретится какой-либо тег <script>. В Internet Explorer есть ошибка, которая приводит к сбою @ font-face, если тег <script> встречается первым. CSS перед Javascript - это хорошая практика в целом.

Целевые загрузки

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

Кодировка URI

Я также рекомендую, чтобы вы не кодировали URI своими шрифтами. Можно использовать кодировку Base64 для хранения файлов шрифтов в CSS, но это может на самом деле увеличить размер шрифта. Кроме того, поскольку шрифты в кодировке URI обычно хранятся в одном файле CSS, браузер загружает все различные форматы, независимо от того, может он их использовать или нет.

Местный SRC

Возможно, вы заметили, что в генераторе Font Squirrel @ font-face есть три стиля CSS. Я рекомендую метод Mo 'Bulletproof, потому что он избегает использования ссылки на локальный источник. Использование локального источника теоретически может повысить производительность, поскольку браузер будет искать шрифт на компьютере конечного пользователя, но сообщалось, что Opera может аварийно завершить работу в определенных ситуациях (мое собственное тестирование подтвердило это). Также возможно, что у пользователя может быть поврежденный шрифт, который потенциально может вызвать проблемы. В конечном итоге, проще доставить шрифт с вашего собственного сервера, над которым у вас есть полный контроль.

тестирование

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

Заключение

Благодаря современной поддержке браузера для правила @ font-face и таких инструментов, как Font Squirrel's @ font-face Generator, креативная типография в Интернете уже здесь. Если вы выполните действия, описанные выше, вы сможете предоставлять пользовательские шрифты большинству своих пользователей сегодня эффективным способом. Если вы хотите узнать больше о веб-типографике в целом или узнать, что вы можете сделать, если ваша лицензия на шрифты не настолько либеральна, прочитайте наши сопутствующие статьи «Что нужно знать при рассмотрении пользовательских шрифтов для вашего веб-сайта» и « Реалии веб-шрифтов - пример внедрения пользовательских шрифтов на современном веб-сайте ».