@font-face

@font-face

@font-face CSS @-правило (en-US) позволяет указать шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удалённого сервера, либо с компьютера пользователя. Если в правиле была объявлена функция local() , с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт. Иначе будет скачан и использован шрифт, указанный в функции url() . @font-face позволяет разрабатывать контент не ограничиваясь набором «безопасных» шрифтов (шрифтов, которые настолько распространены, что считаются доступными по умолчанию). Возможность определить локально установленный шрифт позволяет более гибко настраивать шрифты не полагаясь на соединение с интернетом.Распространённым случаем является одновременное использование url() и local() , чтобы использовать локальный шрифт, если он доступен, или иначе скачать копию шрифта.Это правило может использоваться не только на верхнем уровне CSS, но и внутри любого @-правила (en-US) .

@font-face  font-family: "Open Sans"; src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); > 

Синтаксис

Descriptors

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

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

Позволяет контролировать другие расширенные особенности OpenType-шрифтов.

Позволяет осуществлять низкоуровневый контроль над вариациями OpenType и TrueType шрифтов, указывая четырёхбуквенные названия осей для изменения вместе с их значениями.

Задаёт ресурс, содержащий данные шрифта. Это может быть URL-адрес расположения удалённого файла шрифта или имя шрифта на компьютере пользователя.

Чтобы дать браузеру возможность выбрать наиболее подходящий формат шрифта, его можно указать при объявлении внутри функции format() : src: url(ideal-sans-serif.woff) format(«woff»), url(basic-sans-serif.ttf) format(«opentype»);Список доступных форматов: «woff» , «woff2» , «truetype» , «opentype» , «embedded-opentype» , и «svg» .

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

Formal syntax

Примеры

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

html> head> title>Web Font Sampletitle> style type="text/css" media="screen, print"> @font-face  font-family: "Bitstream Vera Serif Bold"; src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf"); > body  font-family: "Bitstream Vera Serif Bold", serif > style> head> body> This is Bitstream Vera Serif Bold. body> html> 

В этом примере используется локальный пользовательский шрифт «Helvetica Neue Bold»; если у пользователя этот шрифт не установлен (используются два различных имени), тогда вместо него используется загружаемый шрифт с названием «MgOpenModernaBold.ttf»:

@font-face  font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; > 

MIME-типы шрифтов

Формат MIME-тип
TrueType font/ttf
OpenType font/otf
Web Open File Format font/woff
Web Open File Format 2 font/woff2

Примечания

  • Веб шрифты попадают под правило ограничения домена (файлы шрифтов должны находиться на том же самом домене, что и использующая их страница), если это ограничение не снимается с помощью CORS.
  • @font-face не может быть объявлен внутри CSS-селектора. Следующий пример не будет работать:
.className  @font-face  font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; > > 

Спецификации

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on 6 дек. 2022 г. by MDN contributors.

Your blueprint for a better internet.

Источник

CSS @font-face Rule

Specify a font named «myFirstFont», and specify the URL where it can be found:

More «Try it Yourself» examples below.

Definition and Usage

With the @font-face rule, web designers do not have to use one of the «web-safe» fonts anymore.

In the @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file.

To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property:

Browser Support

The @font-face rule is supported in Edge, Chrome, Firefox, Safari, and Opera.

The numbers in the table specifies the first browser version that fully supports the font format.

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 14.0 36.0 39.0 10.0 26.0
SVG Not supported Not supported Not supported 3.2 Not supported
EOT 6.0 Not supported Not supported Not supported Not supported

*The font format only works when set to be «installable».

Syntax

Font descriptor Values Description
font-family name Required. Defines the name of the font.
src URL Required. Defines the URL(s) where the font should be downloaded from
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
Optional. Defines how the font should be stretched. Default value is «normal»
font-style normal
italic
oblique
Optional. Defines how the font should be styled. Default value is «normal»
font-weight normal
bold
100
200
300
400
500
600
700
800
900
Optional. Defines the boldness of the font. Default value is «normal»
unicode-range unicode-range Optional. Defines the range of unicode characters the font supports. Default value is «U+0-10FFFF»

More Examples

Example

You must add another @font-face rule containing descriptors for bold text:

The file «sansation_bold.woff» is another font file, that contains the bold characters for the Sansation font.

Browsers will use this whenever a piece of text with the font-family «myFirstFont» should render as bold.

This way you can have many @font-face rules for the same font.

Источник

@font-face

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

Синтаксис

Значения

Внутри конструкции @font-face может находиться набор свойств для изменения параметров шрифта ( font-family , font-size , font-style и др.), а также ссылка на шрифтовой файл. Ссылка записывается в виде src: url(URI) , где URI — относительный или абсолютный путь к файлу.

HTML5 CSS2.1 CSS3 IE Cr Op 11 Op 12 Sa Fx

     @font-face < font-family: Pompadur; /* Имя шрифта */ src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */ >P 

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

Результат данного примера в браузере Safari показан на рис. 1.

Собственный шрифт на странице

Рис. 1. Собственный шрифт на странице

Браузеры

Браузер Internet Explorer до версии 9.0 поддерживает только шрифты формата EOT (Embedded OpenType).

Opera в некоторых случаях может не показывать на веб-странице текст выбранным шрифтом, заменяя его стандартным. Причём для локальных документов всё работает корректно. Это происходит в тех случаях, когда имя пользователя в Windows написано кириллицей.

Источник

Что такое @font-face на самом деле

@font-face

После увиденного мной в коде коллег неадекватного применения font-face:

font-weight: normal; font-family: BrutalType-Bold, sans-serif;

я понял, что что-то не так в датском королевстве. Скорее всего в одной статье всего не объять, но давайте просто начнём.

Допустим, собрались вы в 2021 году подключить шрифт. Начитавшись про то, как же всё плохо (на самом деле, нет) с сервисом Google Fonts, решили подключать локально. Приобрели (естественно) пакет шрифтов, распаковали и увидели следующее:

@font-mess

Зрелище не для слабонервных, понятное дело. Сразу же возникает вопрос, как с этим быть (конвертацию и лицензирование оставим на потом). А ответ на него – @font-face.

При работе со шрифтами в CSS выделяют несколько понятий: семейство (font-family), насыщенность (начертание, font-weight), стиль (font-style), плотность (растяжение, font-stretch), вариант (font-variant) и кегль (размер, font-size).

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

Итак, давайте начнём с указания стиля, здесь вариантов три: normal, italic и oblique. Между italic и oblique разницу не все понимают и далеко не всегда их вообще разделяют. Если коротко, italic – это не только наклон, но и изменение внешнего вида шрифта, вплоть до лигатур (объединения символов), а oblique – те же символы, но под наклоном. И то и то в русском языке чаще всего называют курсивом.

Выходит, в реальной жизни нам остаются два: normal и italic. Если вы видите в названии шрифта слово Italic или аббревиатуру It – это «курсив», italic (MyriadPro-BoldSemiCnIt.otf, MyriadPro-It.otf). Oblique же задаётся аббревиатурой Ob (Obl), но вряд ли вы это где-то увидите.

Дальше идёт начертание. В CSS принято использовать числовые значения от 100 до 900 по степени увеличения насыщенности или же текстовые: normal (400), bold (700). Существуют ещё bolder и lighter, но они работают от наследуемого свойства и использовать их в @font-face не стоит!

В названиях шрифтов это обычно выражается так: Light (100, MyriadPro-Light.otf), Book (300), Regular (400, MyriadPro-Regular.otf), Medium (500), Semibold (600), Bold (700, MyriadPro-Bold.otf), Black (Solid, 900, MyriadPro-BlackCond.otf). Зачастую Black является отдельным семейством, но тут кому как. Естественно, истинные названия и соответствия остаются на усмотрение разработчика шрифта.

Следующее – font-stretch, плотность шрифта. Его широкость-узкость, если хотите. И здесь-то настоящее раздолье: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded (от наиболее узкого к наиболее широкому).

Как вы уже могли догадаться, действует то же правило аббревиатур: Cond, Cn – condensed (узкий, MyriadPro-Cond.otf, MyriadPro-LightCond.otf), SemiCond, SemiCn – semi-condensed (полусжатый, MyriadPro-SemiCn.otf), SemiExt – semi-extended (полуширокий, MyriadPro-SemiExtIt.otf) и так далее.

Остаётся font-variant, но у него всего два варианта: normal и small-caps (когда строчные буквы выглядят как уменьшенные прописные). Здесь с аббревиатурой не угадаешь, предлагайте ваши варианты в комментариях.

Давайте разберём пример подключения. Определим базовый шрифт для двух видов контейнеров (woff2 и opentype/otf):

И какие-нибудь наиболее вычурные варианты:

Как видим, ничего сложного. Семейство всегда одно! Это можно применять как угодно, хоть объединить несколько разных шрифтов в группу «MyBestSiteDuckingFontEver».

К первому классу применится файл MyriadPro-BlackSemiExtIt.woff2 (или otf, в зависимости от поддержки), а ко второму – MyriadPro-BlackSemiCn.woff2. Если не будет ни того, ни другого, то сбросится до MyriadPro-Regular.woff2. Здесь нужно быть внимательным: браузеры любят издеваться над шрифтами и пытаться сделать их жирнее или наклоннее, чем они есть. Особенно славится этим Chrome.

Если и Regular-файл не будет найден, то используется системный sans-serif шрифт, о порядке выбора локальных шрифтов стоит написать отдельный материал.

Надеюсь, мне удалось объяснить азы работы с коллекциями шрифтов и вы не будете больше писать код так, как мои коллеги. Осталось объяснить это им.

Источник

@font-face

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

Синтаксис

Значения

Внутри конструкции @font-face может находиться набор свойств для изменения параметров шрифта ( font-family , font-size , font-style и др.), а также ссылка на шрифтовой файл. Ссылка записывается в виде src: url(URI) , где URI — относительный или абсолютный путь к файлу.

HTML5 CSS2.1 CSS3 IE Cr Op 11 Op 12 Sa Fx

     @font-face < font-family: Pompadur; /* Имя шрифта */ src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */ >P 

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

Результат данного примера в браузере Safari показан на рис. 1.

Собственный шрифт на странице

Рис. 1. Собственный шрифт на странице

Браузеры

Браузер Internet Explorer до версии 9.0 поддерживает только шрифты формата EOT (Embedded OpenType).

Opera в некоторых случаях может не показывать на веб-странице текст выбранным шрифтом, заменяя его стандартным. Причём для локальных документов всё работает корректно. Это происходит в тех случаях, когда имя пользователя в Windows написано кириллицей.

Источник

Читайте также:  Php function argument by name
Оцените статью