CSS правило @font-facecss3

CSS правила

Определение и применение

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

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

Поддержка браузерами

Формат шрифтаChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
TTF/OTF (True Type и Open Type Fonts)4.03.510.03.19.0*12.0
WOFF (Web Open Font Format)5.03.611.15.19.012.0
WOFF2 (Web Open Font Format 2)36.039.0*26.0НетНетНет
SVG (Scalable Vector Graphic)4.0Нет9.03.2НетНет
EOT (Embedded Open Type)НетНетНетНет6.012.0


ДескрипторChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
unicode-range (определяет диапазон символов Unicode)36.036.023.0Да9.012.0

CSS синтаксис:

@font-face{
font-properties: font-properties value;
}

@font-face{
font-family: name; /* Обязательное значение */
src: URL; /* Обязательное значение */
font-stretch: normal | condensed | ultra-condensed | extra-condensed | semi-condensed | expanded | semi-expanded | extra-expanded | ultra-expanded;
font-style: normal | italic | oblique;
font-weight: normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
unicode-range: unicode-range;
}

Значения правила

ЗначениеОписание
font-familyОпределяет имя шрифта. Шрифты, которые содержат в названии более одного слова, либо цифры, необходимо обязательно помещать в кавычки. Обязательное значение.
srcОпределяет URL-адрес(ы), откуда шрифт должен быть загружен. Обязательное значение.
Допускается указывать шрифт на локальном компьютере пользователя по имени, используя следующий синтаксис:
@font-face{
font-family: "Font Name";
src: local("Font Name"), url("/fonts/Font Name.woff2") format('woff2'), url("/fonts/Font Name.woff") format('woff'), url('/fonts/Font Name.ttf') format('truetype');
}
Если в этом случае шрифт не найден на локальном компьютере пользователя, то будет осуществлен поиск в других указанных источниках.
font-stretchОпределяет как шрифт должен быть растянут. Значение по умолчанию - "normal". Необязательное значение.
font-styleЗадает стиль шрифта (обычный | курсивный | наклонный). Значение по умолчанию - "normal". Необязательное значение.
font-weightУстанавливает насколько жирным будет выглядеть текст. Значение по умолчанию - "normal". Необязательное значение.
unicode-rangeОпределяет диапазон символов Unicode, которые шрифт поддерживает. Значение по умолчанию - "U+0-10FFFF". Необязательное значение. С помощью данного дескриптора диапазона Unicode мы можем создать разделенный запятыми список значений диапазона. Каждый из них может быть указан в одной из трех форм:
  • Одна кодовая точка (например, U+416).
  • Начальную и конечную кодовые точки диапазона (например, U+400-4ff).
  • Подстановочный диапазон (например, U+4??) - символы '?' обозначают любое шестандцатиричное число.
Использование диапазона Unicode важно для азиатских языков, в которых намного больше глифов, чем в западных языках, а так же в мультиязычных сайтах. Используя полный набор, пользователям необходимо загружать несколько мегабайт, а не десятки килобайт для отображения. При использовании диапазонов, пользователь будет скачивать только те символы, которые отображаются на странице.

Версия CSS

CSS3

Пример использования

Для добавления шрифта на страницу Вам необходимо:

  1. использовать правило CSS @font-face, которое сообщает браузеру пользователя, откуда необходимо загружать шрифт и какое имя шрифта при этом используется. При работе с правилом @font-face важным моментом является размещение его в начале вашей таблицы стилей, это позволит вашему браузеру сразу преступить к обработке необходимого шрифта.
  2. использовать CSS свойство font-family, чтобы указать имя задействованного шрифта и применить к интересующему Вас фрагменту текста (по аналогии работы с локальными шрифтами).

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

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

  3. Рис.35 Поиск шрифта в службе Google Fonts.
  4. После этого необходимо добавить его в коллекцию (у Вас должен быть создан аккаунт Google):

  5. Рис.35б Добавление шрифта в коллекцию (служба Google Fonts).
  6. После добавления шрифта в коллекцию, для Вас будет доступна возможность скачать его:

  7. Рис.36 Скачивание шрифта (служба Google Fonts).
  8. Распакуйте архив со шрифтами в директорию, из которой они будут подключаться к Вашей веб-странице, либо страницам:

  9. Рис.37 Распаковка архива со шрифтами (служба Google Fonts).

Как Вы можете заметить, в архиве содержится 12 различных шрифтов. Исходя из названий можно установить, что, например, Roboto-Italic предназначен для курсивного стиля шрифта, Roboto-Bold для жирного начертания шрифта, Roboto-BoldItalic для курсивного жирного начертания и так далее.

Еще раз обращаю Ваше внимание, что один файл шрифта содержит:


Т.е. если Вам необходимо получить полужирные и курсивные шрифты, то необходимо подгружать их отдельно (использовать правило CSS @font-face для данного типа шрифта)! Конечно в том случае, если они существуют для понравившегося Вам варианта шрифта. Обязательно учтите эти моменты при работе с веб-шрифтами!

Приступим к подключению, загруженных нами шрифтов к нашему документу. Для заголовков второго уровня (элемент <h2>) и для жирного начертания (элемент <b>) мы будем использовать шрифт - Roboto-Bold. Для абзацев (элемент <p>) будем использовать шрифт Roboto-Regular, а для курсивного начертания - Roboto-Italic.

<!DOCTYPE html>
<html>
<head>
<title>Пример использования правила @font-face</title>
<style> 
@font-face {
font-family : "Roboto";  /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
src : url("../../fonts/Roboto-Regular.ttf") format('ttf');  /* задаем путь к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */
font-style : normal;  /* указываем, что стиль шрифта обычный - это значение по умолчанию */
font-weight : normal;  /* определяет нормальное начертание символов - это значение по умолчанию */ 
}
@font-face {
font-family : "Roboto";  /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
 /* для упрощения работы со шрифтами допускается использовать одинаковое имя, но при этом начертание или стиль шрифта должен отличаться.
 IE 8 и ниже не поддерживают такой подход и если Вы хотите поддерживать эти браузеры, то Вам необходимо называть каждый шрифт по разному и более детально стилизовать каждый селектор */
src : url("../../fonts/Roboto-Bold.ttf") format('truetype');  /* задаем путь к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */
font-style : normal;  /* указываем, что стиль шрифта обычный - это значение по умолчанию */
font-weight : bold;  /* определяет жирное начертание символов */ 
}
@font-face {
font-family : "Roboto";  /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
src : url("../../fonts/Roboto-Italic.ttf") format('truetype');  /* задаем путь к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */
font-style : italic;  /* указываем, что стиль шрифта курсивный */
font-weight : normal;  /* определяет нормальное начертание символов - это значение по умолчанию */ 
}
h2, p, b, i {  /* задаем групповой селектор для элементов <h2>, <p>, <b>, <i> */
font-family : "Roboto", sans-serif;  /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif)  */
}
</style>
</head>
<body>
	<h2>Немного о пандах</h3>
	<p><b>Большая панда</b> (<i>Ailuropoda melanoleuca</i>) — бамбуковый медведь, одно из редчайших вымирающих животных, занесённых в международную Красную книгу; единственный современный представитель рода <b>большие панды</b> (<i>Ailuropoda</i>).</p>
</body>
</html>
Пример использования правила @font-face(позволяет веб-сайтам скачать и использовать шрифты, отличные от 'безопасных веб-шрифтов').
Пример использования правила @font-face(позволяет веб-сайтам скачать и использовать шрифты, отличные от "безопасных веб-шрифтов").

Для полноты картины, давайте рассмотрим, как добавлять несколько вариантов шрифтов (для поддержки современных более сжатых версий шрифтов):

@font-face {
font-family : "Roboto";  /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
src : 
local("font");  /* проверяется есть ли шрифт на локальном компьютере пользователя по имени, если нет то поиск осуществляется в других указанных источниках */
url("/fonts/font.woff2") format('woff2');  /* задаем путь к шрифту (url) и тип шрифта (format). */
url("/fonts/font.woff") format('woff');  /* задаем путь к шрифту (url) и тип шрифта (format). */
url("/fonts/font.ttf") format('truetype');  /* задаем путь к шрифту (url) и тип шрифта (format). */
}

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

Более подробно использование правила @font-face Вы можете изучить из учебника CSS в статье: "Работа со шрифтами в CSS".

CSS правила