Ett nedladdat teckensnitt kan förbli oanvänt eftersom CSS väljer ett annat typsnitt, texten ligger utanför teckensnittets teckenuppsättning eller visningsperioden har löpt ut. På en Mac börjar du med att granska teckensnittet som faktiskt återger en etikett och spårar sedan bakåt genom val och inläsning.

Den här guiden är avsedd för dig som underhåller en webbsida och ser att en teckensnittsbegäran lyckas, men ändå ser reservtext. Använd Chrome på macOS för granskningsstegen. Den påhittade etiketten Panel 204 och familjenamnet Sample Sans nedan illustrerar diagnostiken; de beskriver ingen specifik webbplats.

Vad visar en lyckad nedladdning egentligen?

Dela upp diagnostiken i fyra separata frågor: Hämtades resursen? Registrerades ett användbart typsnitt? Valde CSS det typsnittet för dessa tecken? Ritade renderaren upp det? En förhandsinläsning av ett teckensnitt startar en tidig hämtning; dess närvaro visar inte vilket teckensnitt som används för den synliga texten. MDN: rel="preload"

Matchning av teckensnitt utgår från texten, inte bara från nedladdade filer. Webbläsaren tar hänsyn till de efterfrågade familjerna och teckensnittsegenskaperna och kontrollerar sedan stöd för tecknen. Därför kan en etikett använda flera teckensnitt, och en annan del av sidan kan utlösa en nedladdning som säger föga om etiketten du undersöker. W3C: CSS Fonts Module Level 4, font matching

Använd den här beslutstabellen för att välja nästa kontroll. Den är ett diagnostiskt hjälpmedel som bygger på de dokumenterade gränserna för inläsning och matchning, inte en redovisning av uppmätta webbläsarresultat.

Observation Nästa kontroll Vad den hjälper dig att skilja åt
Beräknad familj skiljer sig från den avsedda familjen Följ den CSS-deklaration som vinner Problem med kaskaden eller målvalet
Beräknad familj stämmer, men det återgivna teckensnittet skiljer sig Granska typsnittsbeskrivningarna och teckentäckningen Problem med val eller reservteckensnitt
JavaScript rapporterar ett inläst typsnitt, men det saknas i dokumentets teckensnittsuppsättning Granska registreringskoden Inläsning utan registrering
Teckensnittet visas efter en omladdning men saknas vid första besöket Granska font-display och inläsningstidpunkten Beteende för visningsperioden
Vanlig text fungerar, men text i canvas förblir oförändrad Granska ritordningen och canvasens teckensnittsinställningar Separat ritoperation

Vilket teckensnitt återger den aktuella etiketten?

På den berörda sidan trycker du på Command + Shift + C och markerar texten. Välj det minsta elementet som innehåller den berörda etiketten i Elements. Öppna Computed och rulla sedan till Rendered Fonts. Chrome anger att detta är vyn där du kan granska vilka teckensnitt som används för den återgivna texten. Chrome DevTools: CSS features reference, Chrome DevTools: Apply other effects

Anteckna det återgivna typsnittet och om källan är lokal eller en nätverksresurs. Anteckna även det beräknade värdet för font-family, font-weight och font-style. Den beräknade familjen är den efterfrågade teckensnittslistan; resultatet för återgivna teckensnitt visar vad som levererade tecknen. Att utseendet känns igen är svagt bevis, eftersom två typsnitt kan se snarlika ut. Chrome DevTools: What font is that?

Om det avsedda typsnittet visas för den berörda texten går du vidare och undersöker den specifika skillnaden i utseende, till exempel vikt eller funktioner. Om det saknas fortsätter du nedan. Behåll originaltexten och visningsområdet oförändrade under testningen så att varje observation går att jämföra.

Begär den effektiva CSS:en det avsedda typsnittet?

Granska de effektiva teckensnittsegenskaperna i Computed och leta sedan upp deras deklarationer under Styles. Chrome skiljer mellan dessa vyer: Styles innehåller åsidosatta deklarationer, medan Computed visar de värden som faktiskt tillämpas. Granska elementet som innehåller texten om ett kort har flera etiketter; en teckensnittsdeklaration på föräldraelementet räcker inte som belägg för underelementet. Chrome DevTools: CSS features reference

Kontrollera både eventuell vinnande kortform font och de enskilda egenskaperna. Till exempel väljer font: 16px sans-serif en generisk familj och återställer utelämnade komponenter i kortformen, inklusive vikt och stil. Den återställer också egenskaper som font-feature-settings och font-variation-settings. Korrigera deklarationen som orsakar det oväntade värdet och granska sedan igen. MDN: font

Jämför sedan den efterfrågade familjen med beskrivningen font-family i den relevanta @font-face-regeln. Den beskrivningen definierar CSS-familjenamnet som används för att referera till typsnittet; filnamnet är inte namnet du ska ange i elementets teckensnittslista. Kontrollera regeln som levereras till webbläsaren, inklusive dess src, vikt, stil och eventuella angivna intervall. MDN: @font-face

Ett variabelt teckensnitts viktintervall kan anges med två värden, medan ett statiskt typsnitt kan ange en enda vikt. Se till att beskrivningarna korrekt återspeglar den tillhandahållna resursen. En avvikelse bör undersökas, men förklarar inte automatiskt att reservteckensnitt används: matchning av teckensnitt tar hänsyn till alternativ när en exakt stil saknas. MDN: @font-face, W3C: Matching font styles

Kan ett lokalt teckensnitt ha företräde?

Granska src och leta efter ett alternativ med local(). På en Mac där teckensnittet är installerat kan webbläsaren använda den lokala kopian, samtidigt som ett separat förinläst webbteckensnitt förblir oanvänt. Så här isolerar du detta i Chrome: öppna panelen Rendering, aktivera Disable local fonts och läs in sidan igen. Jämför Rendered Fonts före och efter och återställ sedan inställningen. Testet gäller källor av typen local() i @font-face-regler. Chrome DevTools: Apply other effects

Lästs typsnittet in och registrerats i rätt dokument?

Ett typsnitt som skapas med new FontFace() kan ha lästs in färdigt innan det läggs till i en teckensnittsuppsättning. För återgivning i ett dokument måste det läggas till i document.fonts. Granska programmets inläsningsflöde och kontrollera båda operationerna; att typsnittets laddningslöfte uppfylls slutför inte i sig registreringen. MDN: CSS Font Loading API

Följande kompletta konsoldiagnostik listar de typsnitt som är registrerade i det aktuella dokumentet. Kör den i konsolkontexten för den berörda sidan. Den läser uppsättningen utan att starta inläsningar eller ändra stilar; den identifierar inte återgivna tecken. Dess webbläsarberoende beteende har inte körts här.

(() => {
  const faces = Array.from(document.fonts, face => ({
    family: face.family,
    weight: face.weight,
    style: face.style,
    stretch: face.stretch,
    unicodeRange: face.unicodeRange,
    status: face.status
  }));

  console.table(faces);
  console.log("Registered face count:", faces.length);
})();

Använd listan för att skilja mellan utebliven registrering och ett registrerat typsnitt som förblir oanvänt. Om en post har statusen error undersöker du inläsningsfelet innan du justerar typografin. En post med statusen loaded visar inläsningsstatusen, medan valet av typsnitt fortfarande beror på elementet och texten. MDN: CSS Font Loading API

Se inte document.fonts.check() som bevis på återgivning. Den kan returnera true även för en familj som inte finns. Det valfria textargumentet begränsar matchningen utifrån deklarerade Unicode-intervall och testar inte enskilda teckens täckning. På samma sätt uppfylls document.fonts.ready när inläsning och layout är klara för teckensnitt som används; det intygar inte att varje deklarerat typsnitt har återgetts. MDN: FontFaceSet.check(), MDN: Document.fonts

Täcker teckensnittet de tecken du testar?

Kontrollera både CSS-beskrivningen unicode-range och själva teckensnittsresursen. Beskrivningen styr vilka tecken som får använda ett typsnitt. Om du utökar beskrivningen får filen inte fler glyfer: teckensnittets teckentabell är fortfarande en del av matchningen. MDN: unicode-range, W3C: Matching font styles

Tänk dig en illustrativ regel begränsad till U+0030-0039. I Panel 204 ligger bara 2, 0 och 4 inom intervallet. Bokstäverna och blanksteget gör det inte. En nedladdning som utlöses av siffrorna visar därför inte att teckensnittet kan återge hela etiketten. MDN beskriver att en behörig teckenförekomst kan leda till att hela teckensnittsresursen laddas ned. MDN: unicode-range

Det här fristående JavaScript-exemplet visar skillnaden. Det körs i en webbläsarkonsol eller Node.js utan förberedelser. Den deterministiska intervallberäkningen kördes för exemplet nedan.

const text = "Panel 204";
const rows = Array.from(text, character => {
  const value = character.codePointAt(0);
  return {
    character,
    codePoint: "U+" + value.toString(16).toUpperCase().padStart(4, "0"),
    inDeclaredRange: value >= 0x30 && value <= 0x39
  };
});

console.table(rows);

Om intervallet utesluter tecken som behövs korrigerar du en felaktig beskrivning eller tillhandahåller en delmängd som innehåller dem. Behåll den ursprungliga felande texten när du kontrollerar resultatet. Utgå inte från att strängiteration testar textformning: kombinerande sekvenser kräver hantering av kluster, och standarden tar hänsyn till formningsinformation där det behövs. Behåll sekvenserna intakta när du jämför resultatet. W3C: Font matching and cluster matching

Missade teckensnittet sin visningsperiod?

Granska font-display om familjen och teckentäckningen verkar stämma. optional har en extremt kort blockeringsperiod och ingen bytesperiod. fallback har en kort bytesperiod. En resurs som kommer fram efter den tillämpliga perioden kan därför göra att reservtexten förblir synlig under sidladdningen. swap tillåter en obegränsad bytesperiod efter den inledande blockeringsperioden. MDN: font-display

Ändra tillfälligt den berörda regeln till font-display: swap i den stylesheet som serveras och upprepa inläsningen under samma ursprungliga förhållanden för en kontrollerad diagnos. Om typsnittet nu visas efter inläsningen stöder det en tidsförklaring. Avgör om den senare visuella ändringen passar sidan innan du behåller inställningen. Upprepa både en första inläsning och en omladdning från cache; ett cachat resultat återskapar inte ensamt den ursprungliga ankomsttidpunkten.

Vad ändras när ett bibliotek eller canvas ritar texten?

Om sidan redan använder Font Face Observer granskar du den observerade familjen och alternativen weight, style och stretch. Dokumentationen beskriver en inläsare och övervakare, kräver vanliga @font-face-regler och kräver en anpassad teststräng när teckensnittet saknar standardtecknen för testet. Standardtidsgränsen är tre sekunder. En tidsgräns i observatören och webbläsarens font-display-period är separata förhållanden. Dokumentation för Font Face Observer

Som en diagnostisk slutsats bör ett lyckat meddelande från observatören följas av en granskning av målelementet. Att övervaka tillgängligheten hos ett typsnitt visar inte att elementets vinnande CSS begär det. Det tillför föga att installera ytterligare en inläsare när den obesvarade frågan gäller vilket typsnitt som återgavs.

Canvas utgör en separat ritgräns. Ritkontexten har en egen inställning för font, som initialt är 10px sans-serif; en ogiltig tilldelning ignoreras. Att ange en CSS-familj på canvas-elementet räcker därför inte för att fastställa kontextens teckensnitt. Granska värdet som tilldelas ritkontexten och ordningen för inläsning och ritning. WHATWG: Canvas text styles

För canvas-text väntar du tills det avsedda registrerade typsnittet har lästs in, anger kontextens teckensnitt och ritar sedan om den berörda scenen med programmets vanliga ritfunktion. Pixlar som redan har ritats får inte ett nytt typsnitt när ett teckensnitt blir tillgängligt. Förberedelse av canvas-text använder dessutom en hypotetisk oändligt bred rad, så ett lyckat canvastest visar inte att en etikett på en begränsad webbsida radbryts på samma sätt. WHATWG: Text preparation and drawing text

Hur bekräftar du att problemet är löst?

Gå tillbaka till den ursprungliga etiketten och upprepa observationen som avslöjade problemet. Kontrollera dess beräknade begäran, återgivna typsnitt och relevanta tecken under de ursprungliga inläsningsförhållandena. Rita om canvasen före jämförelsen. För en kort anteckning om elementet, efterfrågade egenskaper, faktiskt återgivet typsnitt, resurs och ändringen som fungerade; då blir diagnosen reproducerbar.

Avsluta när du kan förklara varför teckensnittet var oanvänt och visa det avsedda resultatet för den berörda texten. En korrigerad familjedeklaration, en korrekt delmängd, ett registrerat typsnitt, en lämplig visningspolicy eller en omritning vid rätt tidpunkt hanterar varsin särskild gräns. Välj den lösning som stöds av dina observationer.

Källor