Hey Hey `font-scherm`

0
40

Y ‘ all weten over lettertype-display? Het is vrij groot. Het is een CSS-eigenschap die u kunt gebruiken binnen @font-face blokken om te bepalen hoe, visueel, dat lettertype wordt geladen. Font laden is echt verdomd ingewikkeld. Hier is een gids van Zach schommelen leatherman om het te bewijzen, dat meer dan 10 lettertypen laden strategieën, met inbegrip van strategieën die betrekking hebben op kritieke inline CSS subsets van de lettertypen in combinatie met het laden van de rest van de lettertypen die later door middel van JavaScript. Het is geen wandeling in het park.

Het gebruik van font-display is een beetje als een wandeling in het park wel. Het is slechts een enkele lijn van CSS. Het maakt niet alles oplossen dat Zach meer exotische demo ‘ s doen, maar het kan een lange weg te gaan met die ene regel. Het is opvallend om nu, als ondersteuning een stuk beter is geworden de laatste tijd. Het is nu in Firefox 58+, Chrome 60+, Safari 11.1+, iOS 11.3+ en Chrome op Android 64+. Vrij goed.

Wat krijg je ervoor terug? De mogelijkheid tot controle van FUIT en FOIT als de juiste is voor uw project, twee dingen die beide een beetje zuigen met betrekking tot lettertypen laden. We hebben een paar posts op het hier:

  • font-display voor de Massa ‘ s van Jeremy Wagner
  • Als je echt een hekel FUIT, font-display: optioneel kan je vast door mij

Herinnering:

FUIT = Flash van Unstyled Tekst
FOIT = Flash van Onzichtbare Tekst

Noch is groot. In een perfecte wereld, onze aangepaste lettertypen gewoon meteen getoond. Maar aangezien dat niet een praktische mogelijkheid is, halen wij op basis van onze prioriteiten.

De beste bron die er over is Monica Dinculescu de toelichting pagina:

ik zou het samenvatten van de waarden keuzes, zoals deze:

  • Als u tevreden bent met FUIT, bent u waarschijnlijk het beste af met font-display: swap; die zal in het display een fallback-font vrij snel, maar wisselen in uw eigen lettertype wanneer het wordt geladen.
  • Als u tevreden bent met FOIT, bent u waarschijnlijk het beste af met font-display: block; dat is redelijk vergelijkbaar met de huidige gedrag browser, waar het geeft niets als u wacht voor de aangepaste lettertype, maar zal uiteindelijk terug te vallen.
  • Als u wilt dat alleen het eigen lettertype te laten zien als het er onmiddellijk font-display: facultatief; het is wat je wilt. Het zal nog laden in de achtergrond en worden er naast het laden van de pagina waarschijnlijk.

Dat zijn een aantal mooie mogelijkheden voor een enkele lijn van CSS. Maar nogmaals, als u een grote tekst-zware site met aangepaste lettertypen, Zach de gids kan u helpen meer te doen.

Ik zou bijna gaan op een ledemaat en zeggen: elke @font-face block-out er moet een font-weergave-eigenschappen. Met het enige nadeel dat u iets aan het doen bent exotische en om wat voor reden wilt dat de browser standaard gedrag.

Wil je hoort iets heel jammer? We hebben al vermeld font-display: block;. Zou je niet denken dat het, uh, nou, het geblokkeerd zijn van het renderen van tekst tot het eigen lettertype geladen? Het maakt niet uit. Het is nog steeds een swap periode. Het zou de perfecte ding voor iets als pictogram lettertypen waar het pictogram (waarschijnlijk) geen betekenis heeft, tenzij het eigen lettertype belastingen. Helaas, er is geen font-display oplossing voor.

En, hé, goh, zou het niet mooi zijn als Google Fonts ons toegestaan om het te gebruiken?