Руководство по CSS

CSS @правила (RULES)

Полный список свойств CSS

Правило @keyframes CSS Правило @charset CSS

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

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

　Использование семейства шрифтов в правилеfont-familyопределитель для названия шрифта, и src определитель связан с внешним именем шрифта.

использование грамматики

Грамматика правила:

@font-face: font-description

Правило @font-face содержит одно или несколько свойств, как и те, что используются в обычном CSS, это так называемое описание шрифта. Вы можете指定 до 24 различных свойств, но все их объяснения выходят за рамки данного справочника - для получения дополнительной информации обратитесь вМодуль шрифтов CSS W3Cстраница.

Общий формат правила @font-face:

@font-face { font-family: fontname; src: url(fontfile path); }

Позже шрифт можно использовать в качестве атрибута (напримерfont-familyи) в названияхfontНо если поддержка загружаемых шрифтов отсутствует или шрифты не могут быть загружены по какой-либо причине, следует указать другое имя шрифта в качестве резерва.

Ниже приведен пример того, как использовать атрибут @font-face.

Пример

　　@font-face {
　　　font-family: "OpenSans";
　　　src: url("../fonts/OpenSans-Regular.eot");
　　　src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
　　}
　　body {
　　　font-family: "OpenSans", Arial, sans-serif;
　　　font-size: 1.2em;
　　}

Проверьте, чтобы увидеть‹/›

Примечание:Используя правило @font-face, вам не нужно зависеть от ограничения количества шрифтов, установленных пользователем на компьютере.

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

Пример

　　@font-face {
	font-family: "OpenSans";
　　　src: url("../fonts/OpenSans-Regular.eot");
　　　src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
　　}
　　@font-face {
　　　font-family: "OpenSansBold";
　　　src: url("../fonts/OpenSans-Bold.eot");
	src: url("../fonts/OpenSans-Bold.ttf") format("truetype");
　　}
　　h1 {
　　　font-family: "OpenSansBold", Arial, sans-serif; /* Указать жирный шрифт OpenSans */
　　}
　　p {
　　　font-family: "OpenSans", Arial, sans-serif;
　　}

Проверьте, чтобы увидеть‹/›

Параметр

Значение параметра следующим образом:

Параметр	Значение	Описание
Обязательные -Следующие параметры являются обязательными.
font-family	font-family	Определить, что будет использоватьсяfont-familyИмя шрифта значений свойств шрифта.
src	src	Указать положение файла шрифта, который нужно использовать.
Опционально -Следующие параметры являются опциональными.
font-style	font-style	Действительныеfont-styleЗначения свойств.
font-weight	font-weight	Действительныеfont-weightЗначения свойств (относительные значения bolder и lighter исключены).

Совместимость браузеров

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

	Firefox 3.5+ Google Chrome 4+ Internet Explorer 4+ Apple Safari 3.1+ Opera 10+

Примечание:В браузерах поддержка специфических технологий шрифтов различна. Internet Explorer поддерживает шрифты типов .eot и .wof, а Firefox, Chrome, Safari и Opera поддерживают .woff, .ttf и .otf типы шрифтов.

Дополнительное чтение

Пожалуйста, обратитесь к следующим учебникам:CSS шрифты.

Правило @keyframes CSS Правило @charset CSS