display шрифты что такое

Свойство CSS font-display

Дата публикации: 2017-05-05

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

Значения

Свойство font-display принимает 5 значений:

auto (по уомлчанию). Браузер использует стандартный метод загрузки, который зачастую похож на значение block.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

block. Браузер прячет текст до полной загрузки шрифта. Если точнее, то браузер отрисовывает текст прозрачным цветом, после чего заменяет его на шрифт. Метод также известен как «мигание невидимого текста» или МНТ.

swap. Браузер отображает фолбек шрифт до полной загрузки кастомного шрифта. Метод также известен как «мигание нестилизованного текста».

fallback. Что-то среднее между auto и swap. Браузер скрывает текст примерно на 100ms, и если шрифт не успел загрузиться, отображается фолбек до тех пор, пока не загрузится кастомный шрифт.

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

Зачем нам font-display

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

Затем пришло правило @font-face и дало веб-дизайнерам и front-end разработчикам силу, о которой они и подумать не могли раньше. С помощью этого правила мы могли загружать файлы шрифтов на сервер, задавать имена шрифтов и указывать ссылки на них. Это правило дало толчок сервисам типа Google Fonts, которые протолкнули кастомные шрифты в массы. Главное препятствие, отделяющее веб-дизайн от печатного дизайна, было преодолено.

Тем не менее, кастомные шрифты обходились (и обходятся) дорого. Файлы шрифтов могут много весить, что выливается в дополнительное время загрузки файлов, снижение производительности, в частности на устройствах с плохим соединением. Еще большую цену платят пользователи с ограниченными тарифами на трафик.

Еще одна проблема, которая возникла при использовании пользовательских шрифтов – «мигание нестилизованного текста». Раньше браузеры по умолчанию отображали системный шрифт, ожидая загрузки кастомного. Веб-страницы стали загружаться быстрее, но веб-дизайнеров беспокоил тот факт, что это отвлекало пользователей и искажало дизайн. Сейчас браузеры скрывают текст до тех пор, пока не загрузится кастомный шрифт, и это явление получило название «мигание невидимого текста» или МНТ.

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

Автор: Geoff Graham

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Источник

display font

type font — печатный шрифт

font reticle — сетка шрифта

generic font — типовой шрифт

matrix font — матричный шрифт

solid font — монолитный шрифт

Смотреть что такое «display font» в других словарях:

display font — Заголовочный шрифт, Крупнокегельный шрифт (Headline font, Display font) Шрифт, предназначенный для набора текстов кеглем [высота шрифта, размер] свыше 14 пунктов. Часто содержит неполный комплект знаков, поскольку обычно не требует полного… … Шрифтовая терминология

Font hinting — is the use of mathematical instructions to adjust the display of an outline font so that it lines up with a rasterized grid. At small screen sizes, with or without antialiasing, hinting is critical for producing a clear, legible text for human… … Wikipedia

Display — may refer to: Display (horse) (1923–1944), an American thoroughbred racehorse Display (zoology), a form of animal behaviour Display advertising, type that typically contains text, i.e., copy, logos, images, location maps, etc. Display case, also… … Wikipedia

Font management software — is a computer utility that allows the user to manage their system font files.Typical features* Browse fonts * Install/Uninstall fonts * Activate/Deactivate fonts * Organise fonts into groups, categories or types * Search for fonts with a specific … Wikipedia

Font rasterization — is the process of converting text from a vector description (as found in scalable fonts such as TrueType fonts) to a raster or bitmap description. This often involves some anti aliasing on screen text to make it smoother and easier to read. It… … Wikipedia

Display PostScript — (or DPS) is an on screen display system. As the name implies, DPS uses the PostScript (PS) imaging model and language to generate on screen graphics. To the basic PS system, DPS adds a number of features intended to ease working with bitmapped… … Wikipedia

Font substitution — is the process of using one font in place of another when the intended font either is not available or does not contain glyphs for the required characters.Font substitution is aided by classifying fonts into families, such that for example a sans … Wikipedia

Display Postscript — ist eine eingeschränkte Erweiterung zur Beschreibungssprache Postscript. Mit Display Postscript versuchte die Firma NeXT 1987 eine Technik zu entwickeln, in der die Bildschirmdarstellung mit Postscript erfolgt. Dadurch sollte ein besseres WYSIWYG … Deutsch Wikipedia

Font Fusion — Infobox Software name = Bitstream Font Fusion caption = Bitstream Inc. Font Fusion rendering multiple color bordered Greek characters, where the border is anti aliased to the background, and the interior color is anti aliased to the border.… … Wikipedia

Font — A type of typeface. Two sorts are used in computers: Screen fonts are used in GUI systems to display WYSIWYG letter shapes on the computer display, and Printer fonts are used for printed documents. Fonts can either be bit mapped or vector … International financial encyclopaedia

Источник

Ускоряем веб-шрифты за счет свойства font-display

к.э.н. Лавлинский Николай Евгеньевич, технический директор ООО «Метод Лаб»

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

Как отрисовывают шрифты браузеры

По умолчанию различные браузеры имеют свой алгоритм ожидания шрифтов и рендеринга текста. Существует понятие задержки (timeout), это время которое браузер готов подождать до получения шрифта. Далее происходит показ подменного шрифта (fallback). После этого браузер может получить шрифт и произвести замену на нужный шрифт (swap). В таблице ниже показано поведение различных браузеров по умолчанию.

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

Однако, ожидание трёх секунд для отображения текста на странице сложно назвать приемлемым (особенно в рамках цели отрисовки странинцы за одну секунду). Хочется отдельно контролировать каждый стиль шрифта по режиму ожидания его загрузки.

И здесь нам на помощь приходит новое свойство font-display.

Свойство font-display

Это новое свойство контролирует поведение браузера по поводу рендеринга шрифтов. Всего существует пять вариантов значений: auto, block, swap, fallback, optional. Указывается оно в блоке @font-face, как одно из свойств.

Варианты свойства font-display.

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

Использование свойства font-display позволяет тонко регулировать поведение браузера и по сути обходить ограничения по скорости сети для максимально быстрой отрисовки полезного контента. Конечно, это не отменяет использования всех остальных методов оптимизации веб-шрифтов, но позволяет по-другому взглянуть на приритет загрузки ресурсов. Например, если шрифт загружается в режиме swap, то его можно не указывать с помощью механизма preload (подробнее о preload в этой статье).

Источник

Управляйте шрифтами с помощью CSS font-display

Несколько способов сообщить браузеру, как подключить шрифт.

Загрузка пользовательских шрифтов при первом посещении негативно влияет на производительность веб-страницы. Как веб-разработчики и дизайнеры, мы всегда стараемся создать прекрасный, плавно работающий сайт, но чаще всего две этих цели расходятся. CSS свойство font-display помогает сбалансировать эстетичность и производительность.

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

Fallback

Если вы зададите свойству font-display значение fallback, то браузер будет ждать менее секунды, пока загрузится ваш пользовательский шрифт. Если к этому момент шрифт не загрузится, будет использован откат. В этом случае пользователю не придется долго разглядывать пустую страницу.
Загвоздка, конечно же, в том, что ваш прекрасный пользовательский шрифт не будет загружен на этой странице, а это, возможно, испортит внешний вид и впечатление от вашего сайта. font-display: fallback очень прямолинеен: если ваш шрифт не загрузился вовремя, то он не будет использован.

Если ваш пользовательский шрифт критически важен для дизайна сайта, для вас есть вариант получше. font-display: swap сразу же использует резервный шрифт. В этом случае, как только завершится загрузка вашего пользовательского шрифта, будь то через секунду или 5, браузер заменит резервный шрифт на ваш пользовательский. Стоит отметить, что смена шрифта может раздражать пользователя, особенно если он уже сфокусировался на чтении.

Block

Если вы все-таки решили, что ваш шрифт очень важен, используйте font-display: block. Это свойство скажет браузеру подождать некоторое время (около трех секунд), чтобы загрузить шрифты. В это время пользователь не будет видеть никакого текста. Через три секунды будет использован резервный шрифт.
С этого момента, неважно, как долго браузер будет загружать шрифты, он заменит недавно загруженный на резервный, даже если пользователь уже начал прокручивать и читать вашу страницу.

Какой способ использовать?

Если производительность стоит на первом месте, а пользовательские шрифты не очень-то вас волнуют, то font-display: fallback – это ваш выбор. Если пользовательский шрифт очень важен, то swap и block для вас.
Имейте в виду, что каким бы способом вы не воспользовались, сначала всё хорошо протестируйте.

Перевод статьи Control web typography with CSS font display
Автор оригинального текста: Umar Hansa

Источник

CSS font-display: будущее рендеринга шрифтов в Интернете

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

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

Использование font-display

Ключевые слова для всех доступных значений:

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

Временная шкала font-display

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

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

font-display: auto

font-display: block

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

Пока браузер ненадолго ждет запрошенного шрифта, он отображает текст невидимым резервным шрифтом; после этого, если шрифт еще не доступен, резервный шрифт становится видимым; и всякий раз, когда загрузка завершается, браузер повторно отображает текст с нужным шрифтом.

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

В начале загрузки страницы заголовок невидим, но он есть в DOM. Примерно через три секунды, если шрифт еще не доступен, текст становится видимым с помощью резервного шрифта. В демонстрации видео я имитирую плохие условия сети с помощью функции регулирования сети Chrome DevTools. Наконец, когда шрифт удается загрузить, заголовок перерисовывается вместе с ним.

font-display: swap

При этом значении период блока сокращается до 0, а период обмена увеличивается до бесконечности. Поэтому и здесь период отказа отсутствует.

Источник