ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

CSS Веб-шрифты


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

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

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

Ваши "собственные" шрифты определяются в CSS правиле @font-face.


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

TrueType Fonts (TTF)

TrueType - это стандарт шрифтов, разработанный в конце 1980-х годов компаниями Apple и Microsoft. TrueType является наиболее распространенным форматом шрифтов для операционных систем Mac OS и Microsoft Windows.

OpenType Fonts (OTF)

OpenType - это формат для масштабируемых компьютерных шрифтов. Он был построен на TrueType и является зарегистрированным товарным знаком Microsoft. Шрифты OpenType обычно используются сегодня на основных компьютерных платформах.

Web Open Font Format (WOFF)

WOFF - это формат шрифта для использования на веб-страницах. Он был разработан в 2009 году и в настоящее время является рекомендацией W3C. WOFF - это, по сути, OpenType или TrueType со сжатием и дополнительными метаданными. Цель состоит в том, чтобы поддержать распространение шрифтов с сервера на клиент по сети с ограничениями пропускной способности.

Web Open Font Format (WOFF 2.0)

TrueType/OpenType шрифт, обеспечивающий лучшее сжатие, чем WOFF 1.0.

SVG Шрифты/Формы

Шрифты SVG позволяют использовать SVG в качестве символов при отображении текста. Спецификация SVG 1.1 определяет модуль шрифта, который позволяет создавать шрифты в документе SVG. Вы также можете применять CSS к документам SVG, а правило @font-face можно применять к тексту в документах SVG.

Embedded OpenType Шрифты (EOT)

EOT-шрифты - это компактная форма шрифтов OpenType, разработанная Microsoft для использования в качестве встроенных шрифтов на веб-страницах.


Браузерная поддержка форматов шрифтов

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

Font format
TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 Нет 36.0 35.0* Нет 26.0
SVG Нет 4.0 Нет 3.2 9.0
EOT 6.0 Нет Нет Нет Нет

*IE: Формат шрифта работает только в том случае, если он установлен как "устанавливаемый".

*Firefox: По умолчанию не поддерживается, но может быть включен (необходимо установить флажок "true" чтобы использовать WOFF2).


Как использовать нужный шрифт?

В правиле @font-face сначала определите имя для шрифта (например, myFirstFont), а затем укажите на файл шрифта.

Совет: Всегда используйте буквы в нижнем регистре для указания URL-адреса шрифта. Буквы в верхнем регистре могут дать неожиданные результаты в Internet Explorer.

Чтобы использовать шрифт для элемента HTML, обратитесь к имени шрифта (myFirstFont) через свойство font-family:

Пример

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}
Попробуйте сами »

Использование (полу)жирного текста

Вы должны добавить другое правило @font-face, содержащее дескрипторы для полужирного текста:

Пример

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}
Попробуйте сами »

Файл "sansation_bold.woff" - это другой файл шрифта, содержащий жирный шрифт для шрифта Sansation.

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

Таким образом, вы можете иметь много правил @font-face для одного и того же шрифта.


Проверьте себя с помощью упражнений!


CSS Дескрипторы шрифтов

В следующей таблице перечислены все дескрипторы шрифта, которые могут быть определены внутри правила @font-face:

Дескриптор Значения Описание
font-family name Обязательный. Определяет имя для шрифта
src URL Обязательный. Определяет URL файла шрифта
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
Необязательный. Определяет, как шрифт должен быть растянут. По умолчанию это "normal"
font-style normal
italic
oblique
Необязательный. Определяет, как шрифт должен быть стилизован. По умолчанию это "normal"
font-weight normal
bold
100
200
300
400
500
600
700
800
900
Необязательный. Определяет жирность шрифта. По умолчанию это "normal"
unicode-range unicode-range Необязательный. Определяет диапазон символов UNICODE, которые поддерживает шрифт. По умолчанию это "U+0-10FFFF"