Hej hej `font-visa”

0
34

Hörni vet om font-display? Det är ganska stor. Det är en CSS-egenskap som du kan använda i @font-face-block för att styra hur, visuellt, som teckensnitt laddas. Font lastning är egentligen ganska jävla komplicerat. Här är en guide från Zach Leatherman att bevisa det, som omfattar över 10 font laddar strategier, inklusive strategier som inbegriper kritisk inline CSS av delmängder av teckensnitt i kombination med lastning resten av teckensnitt senare genom JavaScript. Det är inte någon promenad i parken.

Med hjälp av font-displayen är lite som en promenad i parken dock. Det är bara en enda rad av CSS. Det löser inte allt som Zach mer exotiska demos göra, men det kan gå en lång väg med att en linje. Det är anmärkningsvärt att föra upp just nu, som stöd har förbättrats en hel del på sistone. Det är nu i Firefox 58+, Chrome 60+, Safari 11.1+, iOS 11.3+ och Chrome på Android 64+. Ganska bra.

Vad får du från det? Förmågan att kontrollera FOUT och FOIT som är rätt för ditt projekt, två saker som båda kinda suger när det gäller teckensnitt lastning. Vi har fått ett par inlägg om det här:

  • font-display för Massorna av Jeremy Wagner
  • Om du verkligen tycker om FOUT, font-bildskärm: tillval som kan vara ditt jam av mig

Påminnelse:

FOUT = Blixt av Unstyled Text
FOIT = Blixt av Osynlig Text

Inte heller är bra. I en perfekt värld, vårt anpassade teckensnitt bara visa upp omedelbart. Men eftersom det inte är praktiskt möjlig, vi plocka baserat på våra prioriteringar.

Den bästa källan ut det om det är Monica Dinculescu är explainer-sida:

jag skulle sammanfatta dessa värden val så här:

  • Om du är OK med FOUT, du är nog bäst ut med teckensnittet-display: swap; som kommer att visa en fallback font ganska snabbt, men byta in dina egna teckensnitt när den laddar.
  • Om du är OK med FOIT, du är nog bäst ut med teckensnittet-display: block; som är ganska lik nuvarande webbläsare beteende, där det visar ingenting som den väntar på av anpassade typsnitt, men kommer så småningom att falla tillbaka.
  • Om du bara vill att den egna teckensnitt för att visa på alla om det är det omedelbart, font-bildskärm: tillval, är vad du vill. Det kommer fortfarande laddas i bakgrunden och vara där nästa sida belastning förmodligen.

De är några ganska anständigt alternativ för en enstaka rad i CSS. Men återigen, kom ihåg att om du kör en stor text-tunga webbplats med egna teckensnitt, Zach ‘ s guide kan hjälpa dig att göra mer.

Jag skulle nästan gå ut på en lem och säger: vart @font-face-block där ute bör ha en font-display egendom. Med det enda förbehållet är att du gör något exotiskt och av någon anledning vill att webbläsaren standard beteende.

Vill du höra något helt olyckligt? Vi har redan nämnt font-display: block;. Skulle inte du tror det, öh, ja, blockerade rendering av text tills den anpassade teckensnitt laster? Det gör det inte. Det är fortfarande fick en swap period. Det skulle vara en perfekt sak för något liknande ikon fonter där ikonen (förmodligen) har ingen betydelse om inte det egna teckensnitt laddas. Ack, det är ingen font-display lösning för detta.

Och hej jisses, skulle det inte vara trevligt om Google Fonts tillåtit oss att använda det?