Статьи

Использование CSS3 и @ font-face для использования любого пользовательского шрифта на веб-сайте

Октябрь 26, 2017

Я должен был написать об этом давно, но лучше поздно, чем никогда — время поделиться своим опытом. Типография является важной частью пользовательского опыта, и с помощью CSS3 @ font-face мы можем предложить пользователям любой шрифт, какой захотим.

CSS3 @ f ont-face

Font-face работает так же, как директива @media, где вы объявляете фамилию font-face и источник файлов шрифтов, которые вы хотите использовать. Кроме того, вы также можете контролировать вес и стиль шрифта. Очень простой пример выглядит так:

@font-face {
	font-family: "ChantelliAntiquaRegular";
	src: url("Chantelli_Antiqua-webfont.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

Символ смайлика — это просто способ избежать ссылки на локальный шрифт на машине / устройстве и не заканчивать тем, на что вы надеялись. Пол Ирландский описывает это более подробно в синтаксисе Bulletproof @ font-face .

Затем, чтобы использовать шрифт, вы просто ссылаетесь на него, как на любое другое семейство шрифтов, то есть:

h1 {
	font-family: "ChantelliAntiquaRegular";
}

Различные форматы шрифтов

Однако существует множество форматов шрифтов, поэтому давайте разберем каждый из них:

TrueType (. T tf)

Самый распространенный формат шрифтов в Windows и Mac. Считается необработанным форматом, так как он не оптимизирован для Интернета.

OpenType (. O tf)

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

WOFF — Web Open Font Format (. W off)

WOFF — это открытая сжатая версия шрифтов TrueType / OpenType, которая также поддерживает включение метаданных, отделенных от данных шрифта. Это считается оптимальным форматом для использования веб-шрифтов.

СРВ — Embedded Open Type (. Е ВЗ)

Разработанный Microsoft для использования для шрифтов на веб-страницах. Может быть создан из формата шрифта TrueType.

SVG (масштабируемая векторная графика) шрифты (. S vg)

Рендеринг шрифтов на основе SVG. Вы также можете использовать .svgz, которая является версией SVG-шрифтов в формате gzip.

Поддержка веб-браузера

Продемонстрировав базовое использование @ font-face и изучив различные существующие форматы шрифтов, давайте посмотрим на поддержку веб-браузера.

@ f ont-face

Поддержка @ font-face довольно широко реализована:

  • Internet Explorer 4+ (да, по-настоящему)
  • Mozilla Firefox 3.5+
  • Google Chrome 4+
  • Safari 3.1+
  • Опера 10+

Поддержка WOFF

  • Internet Explorer 9+
  • Mozilla Firefox 3.6+
  • Google Chrome 6+
  • Safari 6+
  • Opera 11.1+

Поддержка OpenType

  • Mozilla Firefox 3.5+
  • Google Chrome 4+
  • Safari 3.1+
  • Опера 10+
  • iOS Mobile Safari 4.2+

Поддержка TrueType

  • Internet Explorer 9+ (хотя немного неясно)
  • Mozilla Firefox 3.5+
  • Google Chrome 4+
  • Safari 3.1+
  • Опера 10+
  • iOS Mobile Safari 4.2+

EOT поддержка

  • Internet Explorer 4+

Поддержка SVG Fonts

  • Mozilla Firefox 3.5+
  • Google Chrome 4+
  • Safari 3.1+
  • Опера 10+
  • iOS Mobile Safari 3.2+

На практике это означает, что вам нужно поддерживать шрифты WOFF, TrueType (или OpenType), EOT и SVG для вашей веб-страницы, чтобы охватить как можно больше.

Реальный пример использования @ f ont-face

С различными форматами шрифтов, поддерживаемыми по всем направлениям, вот как может выглядеть реальный пример:

@font-face {
	font-family: "ChantelliAntiquaRegular";
	src: url("Chantelli_Antiqua-webfont.eot");
	src: local("?"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontZjhIjbDc") format("svg");
	font-weight: normal;
	font-style: normal;
}

Как вы можете видеть здесь, сначала мы объявляем ссылку на файл шрифта .eot, чтобы убедиться, что он работает в более старых версиях Internet Explorer. Затем у нас есть пуленепробиваемый подход: избегать локальных файлов шрифтов, а затем указывать различные ссылки на файлы шрифтов и их форматы в последовательном порядке, пока веб-браузер не найдет поддерживаемый формат.

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

Демо

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

Шрифт Белка

Font Squirrel является отличным ресурсом как для поиска открытых шрифтов, бесплатных для использования, так и для генерации вышеуказанного кода @ font-face и соответствующих файлов шрифтов . У них есть готовые комплекты для загрузки, а также генератор @ font-face — просто загрузите файл шрифта и получите множество форматов и готовый CSS-код обратно.

Безопасность и защищенные шрифты

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

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

При использовании генератора Font Squirrel @ font-face у вас есть возможность, что шрифт не должен быть установлен на любом настольном компьютере, оставляя его работать только на других веб-сайтах. Некоторые клиенты будут в восторге от этого. Тем не менее, если вы используете купленный шрифт в литейном цехе, есть вероятность, что вам не разрешат иметь его на вашем веб-сервере (то же самое касается пользовательских шрифтов некоторых компаний).

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

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

  1. Выберите открытый шрифт или найдите открытый шрифт, который выглядит достаточно близко к тому, что вы хотите.
  2. Используйте шрифт клиента и спросите его, все ли в порядке, пока никто не сможет установить его на свои машины.
  3. Посмотрите на Typekit и посмотрите, смогут ли они предложить то, что вам нужно.

Теперь используйте идиотские шрифты!

36
Share: