Навигация по сайту

Популярные статьи

Согласованные веб-безопасные шрифты CSS с использованием Google Font и Cufon

  1. Семейство шрифтов Web Safe CSS
  2. Google Fonts
  3. Cufon

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

Ваш шрифт не только является корнем вашего онлайн-брендинга, но также может улучшить общее восприятие и поведение пользователей на вашем сайте

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

Семейство шрифтов Web Safe CSS

  • Веб-сайт: Стек шрифтов CSS
  • Плюсы: быстрая загрузка, совместимость со всеми устройствами, ОС и браузерами
  • Минусы: шрифты должны быть установлены локально на устройстве просмотра
Описание

Вы можете указать свой шрифт с помощью font-family: "Century Gothic"; на вашем веб-сайте CSS, но если на устройстве, которое используется для просмотра вашего веб-сайта, не установлена ​​программа «Century Gothic», вместо этого будет использоваться общий шрифт для отображения контента, также известный как запасной вариант .

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

Пример

семейства шрифтов: "Helvetica Neue", Helvetica, Arial, без засечек;

Приведенный выше CSS будет пытаться отобразить содержимое в «Helvetica Neue» или, если операционная система не установит его, он будет пытаться использовать следующий шрифт Helvetica и т. Д. Например, на компьютере Apple часто уже установлена ​​программа «Helvetica Neue», поэтому он будет отображаться соответствующим образом в режиме онлайн, тогда как на ПК с Windows может отображаться «Helvetica» или менее.

Google Fonts

  • Веб-сайт: Google Webfonts
  • Плюсы: последовательный дисплей, независимый от ОС
  • Минусы: увеличение загрузки страницы
Описание

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

Пример

встраивания кода <link href = 'http: //fonts.googleapis.com/css? Family = Gabriela' rel = 'stylesheet' type = 'text / css'>

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

Cufon

  • Веб-сайт: Генератор Cufon
  • Плюсы: сделать любой шрифт Web безопасным и последовательным
  • Минусы: более длительная загрузка страниц из изображений Cufon; Требуется JS
Описание

Более утомительным методом, но позволяющим использовать любые установленные на компьютере гарнитуры, является Cufon. Этот метод требует, чтобы все шрифты, которые мы намереваемся использовать, были бесплатными или, если нет, приобретены коммерческие лицензии.

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

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

Сгенерированный файл Cufon затем внедряется на веб-сайт, а Javascript используется для «Cufon» желаемых HTML-элементов, который заменяет текст изображениями для точного отображения шрифта.

Com/css?