Показване на шрифт - CSS-трикове

Anonim

На font-displayдефинира собственост как шрифтове са заредени и показвани от браузъра. Прилага се към @font-faceправилото, което дефинира персонализирани шрифтове в таблица със стилове.

@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 downloaded */ font-display: fallback; /* Define how the browser behaves during download */ )

Стойности

В font-displayимота приема пет ценности:

  • auto(по подразбиране): Позволява на браузъра да използва метода си по подразбиране за зареждане, който най-често е подобен на blockстойността.
  • block: Инструктира браузъра за кратко да скрие текста, докато шрифтът се изтегли напълно. По-точно, браузърът изчертава текста с невидим заместител, след което го сменя с персонализирания шрифт, веднага щом се зареди. Това е известно още като „светкавица на невидим текст“ или FOIT.
  • swap: Инструктира браузъра да използва резервния шрифт за показване на текста, докато потребителският шрифт не се изтегли напълно. Това е известно още като „проблясък на нестилиран текст“ или FOUT.
  • fallback: Действа като компромис между autoи swapценности. Браузърът ще скрие текста за около 100ms и ако шрифтът все още не е изтеглен, ще използва резервния текст. Той ще се замени с новия шрифт, след като бъде изтеглен, но само по време на кратък период на суап (вероятно 3 секунди).
  • optional: Подобно fallback, тази стойност казва на браузъра първоначално да скрие текста, след което да премине към резервен шрифт, докато персонализираният шрифт не е наличен за използване. Тази стойност обаче също така позволява на браузъра да определи дали изобщо се използва персонализираният шрифт, като използва скоростта на връзката на потребителя като определящ фактор, когато по-бавните връзки са по-малко склонни да получат потребителския шрифт.

Ето още един начин да мислите за тях

Блок период Разменен период
блок Къс Безкраен
размяна Нито един Безкраен
резервен Изключително кратък Къс
по избор Изключително кратък Нито един

Защо се нуждаем font-display

Преди да имаме широка поддръжка @font-face, нашият типографски арсенал беше ограничен до локални шрифтове, като единствените налични шрифтове бяха тези, които бяха предварително заредени на компютъра на крайния потребител. Ние наричаме тези „безопасни в мрежата“ шрифтове, тъй като браузърът не трябва да изтегля нищо, за да бъдат изобразени.

Тогава дойде @font-faceправилото, което даде на уеб дизайнерите и разработчиците на фронт енд нови типографски способности за разлика от всякога. Това ни позволи да качим файлове с шрифтове на сървър и да напишем набор от правила в нашите таблици със стилове, които дават име на шрифта и да казват на браузъра къде да изтеглите файловете. Той също така породи услуги като Google Fonts, които донесоха персонализирани шрифтове в масите. И накрая, голямо препятствие, което разделя уеб дизайна от дизайна на печат, беше свалено!

Въпреки това, потребителските шрифтове дойдоха (и продължават да се предлагат) на цена. Файловете с шрифтове могат да бъдат големи и допълнителното време за изтегляне на файловете може да забави работата на даден сайт, особено за устройства с по-бавна мрежова връзка. Допълнителните разходи за потребителите при ограничени планове за данни също станаха фактор.

Друга особена загриженост, която възникна при персонализираните шрифтове, е това, което беше наречено „светкавица на нестилизиран текст“ или накратко FOUT. Браузърите по подразбиране ще показват системен шрифт, докато чакат изтеглянето на персонализирания шрифт. Това позволи на уеб страниците да се зареждат по-бързо, но породи опасения сред уеб дизайнерите, които разглеждаха това като отвличане на потребителския опит и погрешно представяне на предвидения дизайн. Днес уеб браузърите обикновено скриват текста, докато не бъде изтеглен потребителският шрифт, който сега наричаме „светкавица на невидим текст“ или FOIT.

Нито FOUT, нито FOIT са страхотни. Имаме начини да оптимизираме работата на персонализираните шрифтове, за да улесним ефектите. Сега обаче трябва font-displayда кажем на браузъра дали предпочитаме FOUT, FOIT или дори нещо между тях.

Тестване за поддръжка

Интересна забележка, отбелязана от Шиме Видас:

Показването на шрифтове на CSS е @font-faceдескриптор, а не свойство, така че неговата поддръжка в браузъра не може да бъде тествана с функционални заявки (CSS @supportsправило и CSS.supports API).

Повече информация

  • Модул за управление на визуализацията на шрифт CSS Ниво 1 Спецификация: Чернова на спецификацията за свойството.
  • font-display за масите: Джеръми Вагнер ни запозна с имота тук на CSS-трикове.
  • Използване @font-face: Изчерпателно обяснение на правилото и най-добрите практики за това как да го използвате.
  • Системна купчина шрифтове: Фрагмент за изцяло отказване на персонализирани шрифтове и разчита единствено на системните шрифтове на потребителя.
  • Контролиране на производителността на шрифта с font-display: Прецизно изписване на темата от Google.

Поддръжка на браузър

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.

работен плот

Chrome Firefox IE Ръб, край Сафари
60 58 Не 79 11.1

Мобилен / таблет

Android Chrome Android Firefox Android iOS Safari
88 85 81 11.3-11.4