У 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: Налаже прегледачу да накратко сакрије текст док се фонт не преузме у потпуности. Тачније, прегледач црта текст невидљивим чуваром места, а затим га замењује прилагођеним лицем фонта чим се учита. Ово је такође познато као „блиц невидљивог текста“ или ФОИТ.swap: Налаже прегледачу да користи резервни фонт за приказ текста док се прилагођени фонт не преузме у потпуности. Ово је такође познато као „блиц нестилизираног текста“ или ФОУТ.fallback: Дела као компромис измеђуautoиswapвредности. Прегледач ће сакрити текст око 100 мс и, ако фонт још није преузет, користиће резервни текст. Пребациће се на нови фонт након преузимања, али само током кратког периода замене (вероватно 3 секунде).optional: Каоfallback, ова вредност говори претраживачу да у почетку сакрије текст, а затим пређе на резервни фонт док прилагођени фонт не буде доступан за употребу. Међутим, ова вредност такође омогућава прегледачу да утврди да ли се прилагођени фонт уопште користи, користећи брзину корисничке везе као одлучујући фактор где је мања вероватноћа да ће спорије везе примити прилагођени фонт.
Ево још једног начина да размишљамо о њима
| Блок Период | Период замене | |
|---|---|---|
| блокирати | Кратак | Бесконачно |
| свап | Ниједан | Бесконачно |
| повући се | Изузетно кратак | Кратак |
| опционо | Изузетно кратак | Ниједан |
Зашто нам треба font-display
Пре него што смо имали широку подршку @font-face, наш типографски арсенал био је ограничен на локалне фонтове, где су једини доступни фонтови били они који су били унапред учитани на рачунар крајњег корисника. Ове фонтове називамо „безбедним на Интернету“ јер прегледач не треба ништа да преузима како би се приказали.
Тада је дошло @font-faceправило које је веб дизајнерима и фронт-енд програмерима дало нове типографске моћи за разлику од икада раније. Омогућило нам је да датотеке с фонтовима пренесемо на сервер и у табеле стилова напишемо скуп правила која именују фонт и кажу прегледачу где да преузме датотеке. Такође је створио услуге попут Гоогле Фонтс који су масовним фонтовима донели прилагођене фонтове. Коначно, срушена је главна препрека која је одвојила веб дизајн од дизајна штампе!
Међутим, прилагођени фонтови долазили су (и настављају се појављивати) по цени. Датотеке фонтова могу бити велике, а додатно време за преузимање датотека може успорити перформансе веб локације, посебно за уређаје на споријој мрежној вези. Додатни трошкови за кориснике на ограниченим пакетима података такође су постали фактор.
Још једна посебна забринутост која се појавила код прилагођених фонтова је оно што је названо „блиц нестилизираног текста“ или кратко ФОУТ. Прегледници би подразумевано приказивали системски фонт док чекају преузимање прилагођеног фонта. Ово је омогућило брже учитавање веб страница, али је изазвало забринутост код веб дизајнера који су ово сматрали отмицом корисничког искуства и лажним представљањем намераваног дизајна. Веб прегледачи данас углавном скривају текст док се не преузме прилагођени фонт, који сада називамо „блицом невидљивог текста“ или ФОИТ.
Ни ФОУТ ни ФОИТ нису сјајни. Имамо начине да оптимизујемо перформансе прилагођених фонтова како бисмо олакшали ефекте. Међутим, сада морамо font-displayда кажемо прегледачу да ли више волимо ФОУТ, ФОИТ или чак нешто између.
Тестирање подршке
Занимљиво упозорење које је приметио Шиме Видас:
ЦСС приказ фонта је
@font-faceдескриптор, а не својство, тако да његова подршка у прегледачу не може да се тестира упитима функција (ЦСС@supportsправило и ЦСС.суппортс АПИ).
Више информација
- ЦСС модул за управљање приказивањем фонтова ниво 1 Спецификација: Нацрт спецификације за својство.
font-displayза масе: Јереми Вагнер нас је упознао са имањем овде на ЦСС-триковима.- Коришћење
@font-face: Свеобухватно објашњење правила и најбоље праксе за његово коришћење. - Стек системских фонтова: Фрагмент за потпуно одрицање прилагођених фонтова и ослања се искључиво на системске фонтове корисника.
- Контрола перформанси фонтова помоћу
font-display: Гоогле-овог финог писања теме.
Подршка прегледача
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
| Хром | Фирефок | ИЕ | Ивица | Сафари |
|---|---|---|---|---|
| 60 | 58 | Не | 79 | 11.1 |
Мобиле / Таблет
| Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
|---|---|---|---|
| 88 | 85 | 81 | 11.3-11.4 |