4 советов экспертов для максимально эффективного использования шрифтов Google

  1. Совет № 1: запрос нескольких шрифтов в одном запросе
  2. Совет № 2: Укажите стили шрифта и подмножества скриптов
  3. Совет № 3: Оптимизируйте, чтобы отправлять только нужные вам символы
  4. Веб-кит Эффекты
  5. Завершение

Google шрифты был с нами почти пять лет. Если вы работаете с веб-интерфейсом, есть все шансы, что вы воспользовались услугой хотя бы на одном из разработанных вами веб-сайтов.

Несмотря на то, что стоимость лицензирования осталась нулевой, библиотека шрифтов Google неуклонно росла как по количеству, так и по качеству, и Google взял на себя ответственность за авторское право и инфраструктуру за вас. Более того, реализация шрифтов Google требует минимальной работы с вашей стороны, поскольку их волшебные серверы решают многие хитрые проблемы, которыми мы привыкли управлять сами.

Мы, вероятно, принимаем это как должное сегодня, но легко забыть, как сложно, хакерски и дорого обходилось использование нестандартной типографии на вашем сайте. Заново познакомиться с SIFR «Если вы хотите быстрое напоминание о том, что мы привыкли проходить.

Имея в своем распоряжении такой полезный ресурс, имеет смысл извлечь из него максимальную пользу. В этой статье я хотел бы представить четыре совета, которые помогут вам использовать шрифты Google в качестве профессионала.

Совет № 1: запрос нескольких шрифтов в одном запросе

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

Таким образом, вместо того, чтобы запрашивать каждый шрифт отдельно, выгодно объединять эти множественные запросы шрифтов в один. В качестве примера, скажем, вы хотите загрузить два шрифта - Lato и Raleway. Правильный способ загрузки шрифтов:

<link href = 'https: //fonts.googleapis.com/css? family = Lato | Raleway' rel = 'stylesheet' type = 'text / css'>

Хотя это и не влияет на общее количество загруженных битов, количество HTTP-запросов сокращается, и было доказано, что это улучшает время загрузки страницы. Чем больше шрифтов вы используете, тем больше потенциальная экономия - хотя есть и другие веские причины для ограничения количества используемых вами внешних шрифтов.

Кроме того, этот метод делает код более лаконичным и читабельным. Вам нужно только взглянуть на одну строку, чтобы понять все шрифты, которые запрашивает ваша веб-страница.

Совет № 2: Укажите стили шрифта и подмножества скриптов

Есть моменты, когда вы можете захотеть курсив или жирный шрифт. В подобных ситуациях вы можете указать стиль шрифта, используя i и b соответственно после имени шрифта, разделенного символом a:.

Вот пример:

<link href = 'https: //fonts.googleapis.com/css? family = Lato: i | Raleway: b' rel = 'stylesheet' type = 'text / css'>

Вы также можете использовать bi для загрузки полужирного курсивного шрифта, если он доступен.

Если вы хотите другой вариант жирного шрифта, вы можете использовать числовой вес. Raleway, например, имеет четыре варианта жирного шрифта с весом 600 700 800 и 900. Чтобы запросить ультра жирный шрифт, вам нужно позвонить:

<link href = 'https: //fonts.googleapis.com/css? family = Raleway: 900' rel = 'stylesheet' type = 'text / css'>

Если вас не устраивают сокращения, вы можете указать полное имя стиля шрифта, как я сделал в следующем примере:

<link href = 'https: //fonts.googleapis.com/css? family = Lato: 300italic' rel = 'stylesheet' type = 'text / css'>

В этом случае вместо загрузки обычного курсивного шрифта мы загружаем облегченную версию.

Некоторые шрифты в каталоге поддерживают несколько сценариев, таких как латинский и греческий. Одним из примеров такого шрифта является Roboto Mono. Чтобы запросить греческое подмножество шрифта, вы можете использовать следующий URL:

<link href = 'https: //fonts.googleapis.com/css? family = Roboto + Mono & subset = greek' rel = 'stylesheet' type = 'text / css'>

Совет № 3: Оптимизируйте, чтобы отправлять только нужные вам символы

В определенных ситуациях вам может понадобиться использовать только строго ограниченный набор символов из данного шрифта. Это также может быть в том случае, когда вам нужны только цифры из данного шрифта.

В подобных случаях просто уменьшить размер запроса, выбирая нужные символы, используя текст = значение в URL-адресе шрифта. Таким образом, Google вернет версию файла шрифта, которую вы запросили, оптимизированную для ваших конкретных потребностей. Это может значительно уменьшить размер файла поставляемого шрифта - особенно с помощью сложных отображаемых шрифтов и сложных каллиграфических шрифтов.

Рассмотрим следующий пример:

<link href = 'https: //fonts.googleapis.com/css? family = Raleway & text = SitePoint' rel = 'stylesheet' type = 'text / css'>

Вместо загрузки полного файла шрифта Raleway мы можем выбрать загрузку только тех символов, которые нам нужны для слова «SitePoint». Это уменьшает размер файла шрифта на 90%.

Эти оптимизации могут складываться и оказывать значительное влияние на общее время загрузки веб-страницы. Имейте в виду, что вам нужно URL-кодировать значение текста.

Увидеть перо dYmZzM по SitePoint ( @SitePoint ) на CodePen ,

Время от времени вам может понадобиться создать текст с некоторыми специальными эффектами. Хотя простые эффекты, такие как множественные тени, могут быть созданы в чистом CSS и являются гибкими, создание сложных эффектов может быть сложным. Шрифты Google упрощают создание некоторых специфических текстовых эффектов, таких как неоновое свечение и анимация огня.

Чтобы включить эту функцию, вам нужно добавить значение effect = в запрос Google Fonts API. Чтобы использовать его для определенного элемента, вам нужно добавить соответствующий класс.

Например, вот пример, чтобы показать, как легко создать эффект неонового свечения. Вы начинаете с добавления этого запроса таблицы стилей на свою веб-страницу:

<link href = 'http: //fonts.googleapis.com/css? family = Monoton & effect = neon' rel = 'stylesheet' />

Чтобы использовать его для любого текстового элемента, просто добавьте имя класса font-effect- {effect-name}. В данном конкретном случае имя-эффекта неон. Следовательно, имя класса будет font-effect-neon.

Увидеть перо Эффект свечения - Google Fonts по SitePoint ( @SitePoint ) на CodePen ,

Это еще одна демка, замедляющая эффект свечения на темном фоне.

Увидеть перо Эффект свечения в Google Fonts по SitePoint ( @SitePoint ) на CodePen ,

Очевидно, что не все эффекты хорошо работают с каждым шрифтом. Эта функция предназначена для использования в заголовках и других заметных текстах. В результате большинство этих эффектов лучше работают на более тяжелых весах и шрифтовых плитах.

Вот еще одна демонстрация CodePen с эффектом структуры.

Увидеть перо Эффекты структуры в Google Fonts по SitePoint ( @SitePoint ) на CodePen ,

Веб-кит Эффекты

Некоторые эффекты, такие как кирпич а также потертая сталь поддерживаются только Chrome и Safari. Пользователи, использующие другие браузеры, просто увидят шрифт без эффектов текстуры.

Хороший вкус будет диктовать щадящее использование этих типов эффектов, но полезно знать, что они есть.

Завершение

Базовый сервис Google Fonts относительно прост в использовании. Функции, обсуждаемые в руководстве, делают услуги еще более впечатляющими.

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

Последний совет не только сокращает код, который вам нужно написать, но и предоставляет удобный способ добавить поразительные эффекты в ваш текст.

Чтобы узнать больше об услуге, я рекомендую прочитать статью на Официальный веб-сайт ,

  • Каким был ваш опыт работы со шрифтами Google?
  • Есть ли причины, по которым вы выбрали Typekit или один из других коммерческих сервисов?

Если вы уже использовали какую-либо из этих функций, сообщите нам об этом в комментариях.

Com/css?
Com/css?
Com/css?
Com/css?
Com/css?
Com/css?
Com/css?