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

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

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

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

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

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

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

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

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

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

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

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

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

Вот пример:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы использовать его для любого текстового элемента, просто добавьте имя класса 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 или один из других коммерческих сервисов?

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

Похожие

Ошибки Google Play в LG K10
Иногда, когда вы используете магазин Google Play, может случиться так, что вам придется столкнуться с некоторыми проблемами и ошибками. В следующей статье мы покажем вам, как быстро и эффективно решать наиболее распространенные ошибки в приложении Google Play. Google Play Store Ошибка 403 Эта проблема возникает при попытке загрузить приложение и получить информацию о том, что доступ к этому приложению запрещен. Ошибка 403 обычно появляется,

Настройка браузеров
WebStorm поставляется с предопределенным списком наиболее популярных браузеров, которые вы можете автоматически устанавливать и запускать из IDE во время работы, отладки или для предварительный просмотр вывода файла HTML , WebStorm предполагает, что вы устанавливаете браузеры в соответствии со стандартной процедурой, и присваивает каждой установке псевдоним, который обозначает путь по умолчанию

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

Как добавить Google Карты в WordPress
Вы можете добавить все виды контента на свой сайт WordPress. На WPBeginner мы показали вам, как добавить аудио файлы , видео , PDF и таблицы в WordPress , Добавление контента из внешних

Как конвертировать аудиокниги для использования в iTunes
Когда вы покупаете аудиокниги в iTunes Store, программа упорядочивает их в разделе «Книги» боковой панели iTunes. Однако, если у вас есть аудиокниги из других источников, они могут быть в разных форматах, включая стандартные форматы MP3 или AAC, и iTunes может обрабатывать их по-разному при импорте. Вместо того, чтобы хранить их вместе с остальными книгами, iTunes может поместить их в раздел

Упаковка на средства защиты растений только в магазин!
Осень - время уборки на фермах, когда мы заканчиваем полевые работы и готовимся к зиме. В то же время мы также предоставляем упаковку с защитными средствами для магазинов. Такие разбирательства гарантируют, что они будут управляться безопасным и законным образом. Ниже приведен список Агрофакта с наиболее важными пунктами, касающимися правил возврата упаковки после средств защиты растений. Я ополаскиваю упаковку использованной

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

Apple, чтобы вы могли отключить iPhone замедление программного обеспечения
... чтобы предотвратить проблемы со старением ионно-литиевых батарей, такие как неожиданное отключение. В рамках грядущей iOS 11.3 пользователи iPhone получат рекомендации, если их батарея нуждается в обслуживании. Кроме того, они смогут увидеть, включена ли функция управления питанием, которая замедляет работу телефона, и затем могут отключить ее, заявили в компании. Генеральный директор Apple Тим Кук

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

5 лучших альтернатив Google Maps
Google Maps - безусловно, самое популярное приложение для карт и навигации. Он предустановлен на многих смартфонах, и веб-служба по-прежнему является первым портом захода для многих пользователей, когда речь идет о планировании маршрута и компании. Тем не менее, всегда есть критика сервиса Google. Зачастую критикуются относительно высокое потребление данных, некоторые особенности, частично неточная информация и другие ошибки.

Как преобразовать документ Google Docs в формат Microsoft Office
Документы, листы, слайды и другие приложения Google Google по умолчанию сохраняют документы в собственных файловых форматах Google. Но вы можете загрузить эти документы на жесткий диск в виде файлов Microsoft Office, хотите ли вы просто один документ

Что вам нужно, чтобы воспользоваться услугой Playstation Now в Польше?
Что вам нужно, чтобы воспользоваться услугой Playstation Now в Польше? Для использования Playstation Now в Польше вам необходимо: консоль ПК или PS4 это игра (это не обязательно контроллер DualShock с консоли PS3 или PS4 - планшет из Xbox 360 или Xbox One также работает без проблем и автоматически определяется при включении) достаточно сильное интернет-соединение (абсолютный минимум - стабильное соединение

Как вам понравилась статья?
Как вам понравилась статья? 5 лучших альтернатив Google Maps 4,4 (87,62%) 63 голоса Мартин Шнайдер Мартин занимается SEO, социальными сетями и PR в сфере онлайн-маркетинга. Он также пишет статьи для блога и экспертного сайта. Мартину нравится отличная рабочая атмосфера в динамичной команде Expertiger.

Вам интересно, что делать, чтобы потерять 3 кг?
Вам интересно, что делать, чтобы потерять 3 кг? Это не секрет! У нас есть простой рецепт успеха для вас. Благодаря этому вы не похудеете за 3 дня, не за неделю, а за время, которое будет наилучшим для вас и вашего тела. Эффект йо-йо? Не в этот раз! Вам интересно, что делать, чтобы потерять 3 кг? Это не секрет! У нас есть простой рецепт успеха для вас. Благодаря этому вы не похудеете за 3 дня, не за неделю, а за время, которое будет наилучшим для вас и вашего тела. Эффект йо-йо? Не

Или, может быть, учиться организовывать небольшие пространства, чтобы все было на своем месте и чтобы поддерживать порядок?
Или, может быть, учиться организовывать небольшие пространства, чтобы все было на своем месте и чтобы поддерживать порядок? Все это можно найти в этом блоге. И поскольку мы уже делаем что-то вроде ничего не делая, я отсылаю вас к блогу Kasia Ogórek, польской Марты Стюарт, чей блог является даже фабрикой вдохновения - для всех. Kasia является примером

Сколько времени понадобилось, чтобы начать магазин?
Сколько времени понадобилось, чтобы начать магазин? От первых концепций, все еще находящихся на страницах бумаги и направления проектов IAI до запуска магазина, прошло около 3 месяцев. Long. Я не предсказывал, что весь этот процесс займет столько времени. И это была первая ошибка - бегущая индустрия основана на коллекциях весна-лето и осень-зима, я начал слишком поздно, в основном из-за пропущенного товара (который я выбрал с мыслью о лете). Какой бюджет

Важнейший вопрос: сколько оперативной памяти вам на самом деле нужно?
Важнейший вопрос: сколько оперативной памяти вам на самом деле нужно? Macworld Lab провела тесты для нескольких компьютеров Mac с различными конфигурациями оперативной памяти и проанализировала результаты. Наш вывод: влияние большего объема ОЗУ зависит от типов задач, которые выполняет ваш Mac. В некоторых ситуациях ваш Mac может выиграть, имея столько оперативной памяти, сколько вы можете себе позволить; в других вы будете в порядке со стандартной конфигурацией. Но прежде чем

Вам нужно позвонить кому-нибудь далеко или организовать веб- или видеоконференцию в разных часовых поясах?
Вам нужно позвонить кому-нибудь далеко или организовать веб- или видеоконференцию в разных часовых поясах? Найдите лучшее время в разных часовых поясах с помощью этого Планировщика собраний. Справка Сокращения часовых поясов Если вы знаете только сокращение часовых поясов, Пожалуйста, попробуйте эти города в качестве заменителей: EST, EDT, восточное время США, Нью-Йорк CST, CDT, центральное время США, Чикаго MST, MDT, американское горное время, Денвер, PST, тихоокеанское

Какие операционные системы вам подходят?
Какие операционные системы вам подходят? Здесь вы получите ответ. Характеристики и характеристики Пререквизиты: CPU: двухъядерный процессор 1 ГГц; 1 ГБ ОЗУ; 500 МБ свободного места на жестком диске Операционные системы: Win XP, Vista, Win 7, Win 8, Win 8.1, Win 10 Вирусный сканер: да Язык: немецкий Брандмауэр: да Защита от спама: да Защита от фишинга: да Защита от шпионских программ: да Режим ноутбука: нет Режим игры: да Мы приложили все усилия, чтобы обобщить различные

Вам не о чем писать?
Вам не о чем писать? Не пишите ни о чем . Ради вашего блога и ваших читателей. Комментируйте другие блоги Комментарий! Вы, наверное, много раз читали об этом во многих статьях. Хотя это очень тривиальная вещь и кажется банальной, она приносит много преимуществ,

Планируете ли вы выходить на другие интернет-рынки или вы ориентируетесь только на Польшу?
Планируете ли вы выходить на другие интернет-рынки или вы ориентируетесь только на Польшу? В проектах на 3-й и 4-й квартал мы не предполагаем расширения. Известно, что вы все еще разрабатываете свой продукт. Как часто вы вводите новые функции на сайт? Как они принимаются партнерами и пользователями. Мы вводим новые функции или оптимизируем те, которые присутствуют на сайте, не реже одного раза в

Очка), но могут ли другие символы и элементы быть введены таким же образом?
Планируете ли вы выходить на другие интернет-рынки или вы ориентируетесь только на Польшу? В проектах на 3-й и 4-й квартал мы не предполагаем расширения. Известно, что вы все еще разрабатываете свой продукт. Как часто вы вводите новые функции на сайт? Как они принимаются партнерами и пользователями. Мы вводим новые функции или оптимизируем те, которые присутствуют на сайте, не реже одного раза в

Com/css?
Com/css?
Com/css?
Com/css?
Com/css?
Com/css?
Com/css?
Есть ли причины, по которым вы выбрали Typekit или один из других коммерческих сервисов?
Как часто информация, содержащаяся в ней, была бесполезна или больше не действительна?
Из каких блогов?