Css font display none

CSS font-display Property

The font-display property defines how font files are downloaded and displayed by the browser. This property has the following values:

The typography was used to be limited to local fonts where the only available fonts were the ones called «web-safe». Then came @font-face rule allowing to upload font files to a server and write a set of rules naming the font and telling the browser where to download the files. It gave rise to the services which allowed to use custom fonts. But these custom font files can be large and reduce the website load time.

There was another concern connected with FOUT («flash of unstyled text»). Browsers would display a system font while the custom font was being downloaded. This gave cause for concern as web designers viewed it as the user experience hijacking. Today browsers commonly hide the text until the custom font is downloaded, which is referred to as FOIT («flash of invisible text»).

But none of the above-mentioned methods is great. Instead, now there is the font-display property telling the browser what we prefer: FOUT or FOIT.

Initial Value	auto
Applies to	All elements. It also applies to ::first-letter and ::first-line.
Inherited	Yes.
Animatable	No.
Version	CSS1
DOM Syntax	object.style.fontDisplay = «swap»;

Syntax

font-display: auto | block | swap | fallback | optional | initial | inherit;

@font-face < font-family: 'MyWebFont'; /* Define the custom font name */ src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); /* Define where the font can be downlaoded */ font-display: optional; >

Values

Value	Description
auto	Font display is defined by the browser.
block	Briefly hides the text until the font has fully downloaded.
swap	Gives the font face a very small block period and an infinite swap period.
fallback	Gives the font face a very small block period and a short swap period.
optional	Gives the font face a very small block period and no swap period.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.

Browser support

Источник

font-display

The font-display descriptor for the @font-face at-rule determines how a font face is displayed based on whether and when it is downloaded and ready to use.

Syntax

/* Keyword values */ font-display: auto; font-display: block; font-display: swap; font-display: fallback; font-display: optional; 

Values

The font display strategy is defined by the user agent.

Gives the font face a short block period and an infinite swap period.

Gives the font face an extremely small block period and an infinite swap period.

Gives the font face an extremely small block period and a short swap period.

Gives the font face an extremely small block period and no swap period.

Note: In Firefox, the preferences gfx.downloadable_fonts.fallback_delay and gfx.downloadable_fonts.fallback_delay_short provide the duration of the «short» and «extremely small» periods, respectively.

Description

The font display timeline is based on a timer that begins the moment the user agent attempts to use a given downloaded font face. The timeline is divided into the three periods below which dictate the rendering behavior of any elements using the font face:

• Font block period: If the font face is not loaded, any element attempting to use it must render an invisible fallback font face. If the font face successfully loads during this period, it is used normally.
• Font swap period: If the font face is not loaded, any element attempting to use it must render a fallback font face. If the font face successfully loads during this period, it is used normally.
• Font failure period: If the font face is not loaded, the user agent treats it as a failed load causing normal font fallback.

Formal definition

Formal syntax

font-display =
auto |
block |
swap |
fallback |
optional

Examples

Specifying fallback font-display

@font-face  font-family: ExampleFont; src: url(/path/to/fonts/examplefont.woff) format("woff"), url(/path/to/fonts/examplefont.eot) format("eot"); font-weight: 400; font-style: normal; font-display: fallback; > 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

font — display

Управляем отображением шрифта во время загрузки страницы.

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Пример

Скопировать ссылку «Пример» Скопировано

 @font-face  font-family: MyGreatFont; src: url(my-great-font.woff) format('woff'), url(my-great-font.eot) format('eot'); font-weight: 400; font-style: normal; font-display: fallback;> @font-face  font-family: MyGreatFont; src: url(my-great-font.woff) format('woff'), url(my-great-font.eot) format('eot'); font-weight: 400; font-style: normal; font-display: fallback; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 @font-face  font-display: auto; font-display: block; font-display: swap; font-display: fallback; font-display: optional;> @font-face  font-display: auto; font-display: block; font-display: swap; font-display: fallback; font-display: optional; >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Чтобы понять, как работает свойство font — display , нужно сделать небольшой экскурс в анатомию загрузки и использования шрифтов.

Для начала пара определений.

Запасной шрифт

Скопировать ссылку «Запасной шрифт» Скопировано

В свойстве font — family мы можем через запятую перечислять несколько шрифтов.

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

Невидимый запасной шрифт

Скопировать ссылку «Невидимый запасной шрифт» Скопировано

Сначала браузер находит запасной шрифт. Затем создаёт анонимное начертание (анонимный font — face ) с использованием метрик запасного шрифта, но оставляет все символы незакрашенными (невидимыми) и использует это начертание для рендеринга текста. Текст остаётся невидимым, но занимаемое им место рассчитывается исходя из метрик запасного шрифта. Использование невидимого запасного шрифта не должно вызывать его загрузки.

В процессе загрузки страницы браузер должен отображать текстовое содержимое. Для любого символа на странице так или иначе определён шрифт, которым отображается этот символ. Зачастую на странице используются нестандартные шрифты, которых с большой долей вероятности нет в операционной системе пользователя. Для того чтобы такие шрифты подключить к странице, используется блок правил @font — face .

Для таких шрифтов в тот момент, когда символ должен показаться на странице, а шрифт ещё не загружен, запускается временная шкала загрузки. Он состоит из трёх этапов:

Рассмотрим этапы подробнее.

Период блокировки

Скопировать ссылку «Период блокировки» Скопировано

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

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

Период замены

Скопировать ссылку «Период замены» Скопировано

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

Период сбоя

Скопировать ссылку «Период сбоя» Скопировано

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

Теперь вернёмся к font — display . Значения этого свойства определяют длительность периодов таймлайна загрузки шрифта.

auto — стратегия загрузки шрифта определяется браузером в автоматическом режиме. То есть какую длительность периодов заложили разработчики браузера, такая и будет применяться. Зачастую эта стратегия очень близка к той, что задаётся значением block .

block — стратегия загрузки шрифта, при которой задаётся короткий (порядка 3 секунд) период блокировки и бесконечный период замены. Другими словами, пока грузится шрифт, браузер весь текст показывает невидимым запасным шрифтом, а после загрузки шрифта переключается на этот шрифт.

Используем это значение в исключительных случаях. Например, если страницу невозможно нормально использовать без именно этого шрифта. Яркий пример: иконочный шрифт. До момента загрузки такого шрифта при других стратегиях браузер будет показывать обычный символ алфавита вместо иконки, что может сбить с толку и не дать нормально пользоваться страницей.

swap — задаёт очень короткий (менее 100 миллисекунд) период блокировки и бесконечный период замены. При такой стратегии браузер практически сразу отображает текст запасным шрифтом, а затем, когда подгружен нужный шрифт, переключается на него.

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

fallback — такая стратегия, при которой задаётся очень короткий (менее 100 миллисекунд) период блокировки, а так же короткий (порядка 3 секунд) период замены. В этом случае браузер практически сразу отображает текст запасным шрифтом, затем, когда подгружен нужный шрифт, переключается на него, но если шрифт не загрузился, остаётся на запасном шрифте.

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

optional — самая сложная стратегия: период блокировки очень короткий (порядка 100 миллисекунд), а вот период замены не задан.

Это значит, что если шрифт стал доступен в период блокировки (то есть очень быстро), то он и будет использоваться. В противном случае браузер считает, что ни в период блокировки, ни в период замены шрифт загрузить не удалось. Если к этому моменту шрифт ещё не понадобился для отрисовки элемента, браузер будет решать отменить загрузку этого шрифта или продолжить с очень низким приоритетом.

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

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

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 В чём же отличие fallback от optional ?

При fallback браузер имеет порядка 3 секунд, чтобы переключиться с запасного шрифта на нужный.

При optional браузер может решить, что важнее показать текст как можно скорее и переключения на основной шрифт может вообще не произойти.

Важно понимать, что и при fallback и при optional даже при успешной загрузке нужного шрифта переключение на него может не случиться.

Источник