@ 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, креативная типография в Интернете уже здесь. Если вы выполните действия, описанные выше, вы сможете предоставлять пользовательские шрифты большинству своих пользователей сегодня эффективным способом. Если вы хотите узнать больше о веб-типографике в целом или узнать, что вы можете сделать, если ваша лицензия на шрифты не настолько либеральна, прочитайте наши сопутствующие статьи «Что нужно знать при рассмотрении пользовательских шрифтов для вашего веб-сайта» и « Реалии веб-шрифтов - пример внедрения пользовательских шрифтов на современном веб-сайте ».

Похожие

Список прокси-серверов Германии
Список прокси-серверов - на этой странице представлен самый большой и актуальный список работающих прокси-серверов, доступных для общего пользования. Наше мощное программное обеспечение ежедневно проверяет более миллиона прокси-серверов, причем большинство прокси-серверов проверяется не реже одного раза в 15 минут, создавая один из самых надежных списков прокси в Интернете - и все это бесплатно. Любой прокси-сервер, указанный на этой странице, можно использовать
10 бесплатных программ для монтирования файлов образов ISO в качестве виртуальных дисков
... файла драйвера, исполняемого файла и файла Readme. Исполняемый файл является переносимым (его необходимо запускать с правами администратора), и его можно использовать где угодно, но драйвер по-прежнему должен быть установлен правильно. Он не так интуитивно понятен и прост в использовании, как многие другие инструменты, и требует некоторой ручной работы для установки драйвера, поэтому обязательно внимательно прочитайте файл Readme.txt.
FireWire
В Википедии есть статья на: FireWire (торговая марка Apple, также известная под торговой маркой Sony i.Link или универсальный IEEE 1394) - это стандарт интерфейса персональной машины и последовательной цифровой видео шины, обеспечивающий высокоскоростную связь и изохронную передачу данных в реальном времени. До 63 устройств могут быть последовательно подключены к одному порту FireWire. FireWire очень хорошо работает при подключении бэкэнда MythTV к определенным кабельным
Продлевает срок службы батареи ZTE Blade A452
Если вы думаете о покупке телефона, безусловно, срок службы батареи является одной из самых важных проблем при выборе той или иной модели. В случае
Обзор плеера Blu-ray 4K Panasonic DMP-UB900
Наконец-то пришло видео со сверхвысоким разрешением на физических носителях, и Blu-ray Disc является его носителем. Первые диски Ultra HD Blu-ray появились на полках магазинов в США в феврале 2016 года, и вскоре европейцы, австралийцы и японцы подключились к игре, хотя Blu-ray-плеер Panasonic DMP-UB900 4K - обзор сегодня не был запущен в США на момент публикации.
Почему вы должны отказаться от OpenOffice и использовать бесплатный пакет LibreOffice
OpenOffice был первым крупным конкурентом свободного программного обеспечения Microsoft Office и из-за этого у него все еще есть господствующее признание имени, которое является проблемой. Разработчики почти все переехали в LibreOffice, духовный преемник OpenOffice. Но OpenOffice продолжает работать как свой собственный проект, видя небольшое
Отображение пользователей и групп на роли | Обзор эластичного стека [7.0] | Эластичный
... файлами (и аналогично для сопоставлений ролей на основе файлов). Использование файлов сопоставления ролей редактировать Чтобы использовать сопоставления ролей на основе файлов, необходимо настроить сопоставления в файле YAML и скопировать его на каждый узел в кластере. В этом могут помочь такие инструменты, как Puppet или Chef. По умолчанию
Лучшие онлайн факсы
Хотя современные компьютеры, принтеры и, очевидно, сегодня в офисах жизненно важны другие технологии, и нельзя отрицать роль, которую скромный факсимильный аппарат играл в мире бизнеса за последние несколько десятилетий. И действительно, роль, которую он все еще играет, - то, что вы можете не осознавать, - это то, что использование факсов на бизнес-арене
Почему на разных экранах сайт выглядит по-разному? (и что с этим делать)
Настольные мониторы, ноутбуки, нетбуки, планшеты, смартфоны и даже телевизоры. Столько устройств и каждое из них встречается во многих версиях с разным размером дисплея. В случае мобильных устройств ориентация (вертикальная / горизонтальная) все еще остается в игре. Давайте учтем тот факт, что нет необходимости использовать интернет-браузер в развернутом окне. И таким образом мы получаем невообразимое количество размеров окон, в которых может отображаться веб-страница.
Сила пустого пространства
Мы хотим показать вам такой жизненно важный инструмент, который может удивить вас как дизайнера. Это так же недооценивается, как тишина между музыкальными нотами. Тем не менее, он достаточно мощный, чтобы означать держать людей на своей странице - другими словами, выживание. Многие элементы формируют макет и структуру интерактивного дизайна. Часто пренебрегают, одним из самых важных является пустое пространство
AN etwork Traffic (Bandwidth) Monitor - это инструмент, который поможет вам следить за входящей и ...
AN etwork Traffic (Bandwidth) Monitor - это инструмент, который поможет вам следить за входящей и исходящей пропускной способностью в вашей сети и определять, какие хосты используют наибольшую пропускную способность. Мониторинг пропускной способности важен в каждой сети и должен быть главным приоритетом для всех сетевых инженеров и администраторов, чтобы точно знать, что происходит в вашей сети в любое время. Во многих случаях использование инструментов для хранения вкладок

Комментарии

Итак, что определяет, какое пустое пространство вы должны использовать?
Итак, что определяет, какое пустое пространство вы должны использовать? Использование как макро, так и микропространств зависит от следующих факторов: Содержимое. Чем больше информации в макете, тем меньше будет пробелов в макросе. Напротив, объем микро пустого пространства будет увеличиваться. Этот компромисс жизненно важен; в противном случае страницы были бы сплошными порциями данных: их чрезвычайно трудно читать! Например, Boulton (2007) описывает,
Что делать, если по какой-то причине мы больше не хотим использовать кредиты и поэтому решили удалить аккаунт?
Что делать, если по какой-то причине мы больше не хотим использовать кредиты и поэтому решили удалить аккаунт? Для этого найдите соответствующую вкладку, где мы найдем пример письма с просьбой удалить наш профиль. Мы можем отправить такой запрос обычной почтой, однако, чтобы улучшить всю процедуру, консультанты, работающие на информационной линии, часто рекомендуют отправлять такие инструкции в электронном виде с адреса электронной почты, который ранее был указан в регистрационной форме. Иногда
Какие цвета вы должны использовать в спальне?
Какие цвета вы должны использовать в спальне? Опять же, я собираюсь пойти против всех книг и дать вам факты. Спальня, помимо очевидного, обычно используется для сна, и из-за этого она считается энергией Инь (тихой), большинство книг скажут вам нарисовать ярко-красный ( ян) или ярко-розовые, чтобы активировать ваши отношения, опять же, если у вас была консультация, красный может быть хорошим цветом для использования, так как практикующий будет знать все ваши элементы в этой конкретной области, но
Также ищите сервис, который имеет программное обеспечение для поддержки настольных платформ, а кто хочет использовать их смартфон для бизнес-задач, сидя перед своим настольным компьютером?
Также ищите сервис, который имеет программное обеспечение для поддержки настольных платформ, а кто хочет использовать их смартфон для бизнес-задач, сидя перед своим настольным компьютером? 4. Более высокие пределы страницы Ограничения на количество страниц являются существенным недостатком некоторых онлайн-служб факса. Обязательно адекватно оцените свои потребности в этом отношении и найдите планы, в которых учитывается месячная сумма, и не делите ее на
Как использовать прокси-серверы?
Как использовать прокси-серверы? Практически любое приложение, такое как ваш собственный веб-браузер, может быть настроено для маршрутизации ваших соединений через прокси-сервер по причинам анонимности или производительности. Конфигурирование вашего браузера для использования прокси-сервера происходит быстро и легко, а инструкции для этого описаны в нашем статьи раздел. Тем не менее, рекомендуемая альтернатива
5. Какие особенности вы можете разработать для моего интернет-магазина?
5. Какие особенности вы можете разработать для моего интернет-магазина? Может быть, это более технический вопрос, но вы действительно должны знать, сколько работы программист вкладывает в вашу работу. - Используете ли вы существующие шаблоны или создаете свои собственные? - Будете ли вы разрабатывать какие-либо функции с нуля? - Убедитесь, что вы подняли эти вопросы в письменном контракте Для тех, кто использует PrestaShop, многие инновационные функции доступны

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