Par font-displayīpašuma nosaka, cik fontu faili tiek ielādēti un parādītas ar pārlūku. Tas tiek piemērots @font-facekārtulai, kas stila lapā nosaka pielāgotus fontus.
@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 */ )Vērtības
font-displayĪpašums piekrīt piecas vērtības:
auto(noklusējums): ļauj pārlūkprogrammai ielādēšanai izmantot noklusējuma metodi, kas visbiežāk ir līdzīgablockvērtībai.block: Uzdod pārlūkprogrammai īsi paslēpt tekstu, līdz fonts ir pilnībā lejupielādēts. Precīzāk, pārlūkprogramma uzzīmē tekstu ar neredzamu vietturi, pēc tam to maina ar pielāgoto fonta seju, tiklīdz tas tiek ielādēts. To sauc arī par “neredzamā teksta zibspuldzi” jeb FOIT.swap: Uzdod pārlūkprogrammai izmantot rezerves fontu, lai parādītu tekstu, līdz pielāgotais fonts ir pilnībā lejupielādēts. Tas ir pazīstams arī kā “stilizēta teksta zibspuldze” vai FOUT.fallback: Darbojas kā kompromiss starpautounswapvērtībām. Pārlūkprogramma slēgs tekstu apmēram 100 ms un, ja fonts vēl nav lejupielādēts, izmantos rezerves tekstu. Pēc tā lejupielādes tas tiks nomainīts uz jauno fontu, bet tikai īsā mijmaiņas periodā (iespējams, 3 sekundes).optional: Tāpat kāfallbackšī vērtība liek pārlūkprogrammai sākotnēji paslēpt tekstu un pēc tam pāriet uz rezerves fontu, līdz pielāgotais fonts ir pieejams lietošanai. Tomēr šī vērtība arī ļauj pārlūkprogrammai noteikt, vai pielāgotais fonts vispār tiek izmantots, par noteicošo faktoru izmantojot lietotāja savienojuma ātrumu, kur lēnāki savienojumi, visticamāk, nesaņems pielāgoto fontu.
Šeit ir vēl viens veids, kā domāt par viņiem
| Bloķēšanas periods | Apmaiņas periods | |
|---|---|---|
| bloķēt | Īss | Bezgalīgs |
| apmainīt | Nav | Bezgalīgs |
| atkāpties | Ļoti īss | Īss |
| neobligāti | Ļoti īss | Nav |
Kāpēc mums vajag font-display
Pirms mums bija plašs atbalsts @font-face, mūsu tipogrāfiskais arsenāls aprobežojās ar vietējiem fontiem, kur vienīgie pieejamie fonti bija tie, kas sākotnēji tika ielādēti galalietotāja datorā. Mēs tos saucam par “drošiem tīmeklim”, jo pārlūkprogrammai nav nepieciešams neko lejupielādēt, lai tos varētu atveidot.
Tad nāca @font-facenoteikums, kas tīmekļa dizaineriem un front-end izstrādātājiem piešķīra jaunas tipogrāfijas pilnvaras atšķirībā no jebkad agrāk. Tas ļāva mums augšupielādēt fontu failus uz serveri un mūsu stilu lapās ierakstīt noteikumu kopumu, kas nosauc fontu un norāda pārlūkprogrammai, kur failus lejupielādēt. Tas arī radīja tādus pakalpojumus kā Google fonti, kas ļāva pielāgotus fontus masām. Visbeidzot, tika gāzts liels šķērslis, kas nošķīra tīmekļa dizainu no drukas dizaina!
Tomēr pielāgotie fonti bija (un turpina nākt) par savu cenu. Fontu faili var būt lieli, un papildu laiks failu lejupielādei var palēnināt vietnes veiktspēju, īpaši ierīcēm ar lēnāku tīkla savienojumu. Par faktoru kļuva arī papildu izmaksas lietotājiem par ierobežotiem datu plāniem.
Vēl viena īpaša problēma, kas radās, izmantojot pielāgotus fontus, ir tā, kas tika dēvēta par “nestilizēta teksta zibspuldzi” vai īsi par FOUT. Pārlūkprogrammas pēc noklusējuma parāda sistēmas fontu, gaidot pielāgotā fonta lejupielādi. Tas ļāva tīmekļa lapas ielādēt ātrāk, taču radīja bažas starp tīmekļa dizaineriem, kuri uzskatīja, ka tas ir lietotāja pieredzes nolaupīšana un nepareizas paredzētā noformējuma atspoguļošana. Mūsdienās tīmekļa pārlūkprogrammas parasti slēpj tekstu, līdz tiek lejupielādēts pielāgotais fonts, ko mēs tagad saucam par “neredzama teksta zibspuldzi” vai FOIT.
Ne FOUT, ne FOIT nav lieliski. Mums ir veidi, kā optimizēt pielāgoto fontu veiktspēju, lai atvieglotu efektus. Tomēr tagad mums ir font-displayjāpasaka pārlūkam, vai mēs dodam priekšroku FOUT, FOIT vai pat kaut kam starp tiem.
Notiek atbalsta pārbaude
Interesants brīdinājums, ko atzīmēja Šime Vidas:
CSS font-display ir
@font-facedeskriptors, nevis īpašums, tāpēc tā atbalstu pārlūkprogrammā nevar pārbaudīt ar funkciju vaicājumiem (CSS@supportskārtula un CSS.support API).
Vairāk informācijas
- CSS fontu renderēšanas vadības moduļa 1. līmeņa specifikācija: rekvizīta specifikācijas projekts.
font-displaymasām: Džeremijs Vāgners mūs iepazīstināja ar īpašumu šeit CSS-Tricks.- Lietošana
@font-face: Visaptverošs noteikuma skaidrojums un paraugprakse, kā to izmantot. - Sistēmas fontu kaudze: fragments, kas ļauj pilnībā atteikties no pielāgotajiem fontiem un paļauties tikai uz lietotāja sistēmas fontiem.
- Fonta veiktspējas kontrole ar
font-display: Google izsmalcinātu rakstu par tēmu.
Pārlūka atbalsts
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 60 | 58 | Nē | 79 | 11.1 |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | 11.3-11.4 |