För att matcha reservfontens upplevda storlek med en webbfont kan du normalisera deras x-höjder med CSS font-size-adjust eller skala ett specifikt reservsnitt med size-adjust. Den här guiden går igenom hur du väljer, beräknar och testar justeringen i en webbläsare på en Mac-dator.

Välj det mått som passar din text

För vanlig engelsk brödtext kan du börja med x-höjden: höjden på gemener i förhållande till teckenstorleken. Två typsnitt med storleken 16px kan ha olika x-höjd, så samma CSS-storlek ser inte nödvändigtvis likadan ut. MDN beskriver font-size-adjust specifikt för att normalisera ett valt teckensnittsmått mellan de typsnitt som används för att återge text. MDN: font-size-adjust

Välj mått innan du ändrar värden. Stycken med många gemener talar oftast för ex-height; etiketter med versaler kan kräva cap-height. Alternativet ch-width normaliserar siffertecknet noll, vilket svarar på en annan fråga än hur gemenernas höjd matchas. Inget av alternativen garanterar samma bredd för alla ord. MDN: värden för font-size-adjust

För den här uppgiften kan du använda en testsida med en rubrik som Sample collection, en etikett som Tile 024 och ett stycke som Amber tiles sit beside a blue circle. Each tile has a short label. Målet är att få reservfontens gemener att se ungefär lika stora ut och samtidigt kontrollera att de här elementen fortfarande får plats.

Din omedelbara uppgift Börja med Vad du bör kontrollera separat
Normalisera storleken på gemener i en fontstack font-size-adjust med ett målvärde för x-höjden Radbrytning och radavstånd
Finjustera ett känt reservsnitt Ett reservalias med size-adjust Att det exakta lokala snittet finns tillgängligt
Minska skillnader i vertikal layout Överskrivningar av teckensnittsmått efter storleksmatchningen Baslinjer och styckehöjd

De två första metoderna har olika räckvidd: font-size-adjust tillämpas på text, medan size-adjust hör hemma i en @font-face-regel och skalar snittets konturer och mått. MDN: font-size-adjust, MDN: size-adjust

Skapa en tillförlitlig jämförelse på din Mac

Använd en förhandsgranskningssida vars formatmall du kan redigera. Exemplen nedan kallar den befintliga webbfonten Sample Web; byt ut namnet mot dess faktiska CSS-familjenamn. Det här är integrationsfragment som förutsätter att webbfonten redan är deklarerad och att exempelenheterna finns.

Högerklicka på exempelstycket i Chrome på din Mac och välj Inspect. Du kan också trycka på Command + Option + C och markera stycket. Chrome öppnar panelen Elements, där Styles visar tillämpad CSS. Chrome: Öppna Chrome DevTools

Öppna Computed, rulla till Rendered Fonts och bekräfta vilket typsnitt som faktiskt återger exemplet. En deklarerad familjelista visar inte i sig att det önskade typsnittet används. Chromes dokumentation visar hur du kan använda det här avsnittet för att skilja lokala resurser från nätverksresurser. Chrome: Tillämpa andra effekter

Behåll samma visningsyta, zoomnivå, teckenvikt, teckenstil, teckenavstånd och behållarbredd under jämförelsen. Kontrollera först webbfonten. Ändra sedan tillfälligt styckets font-family till den reservfont du vill använda, till exempel Arial, sans-serif, och kontrollera återigen vilket typsnitt som används.

Använd Styles för att redigera deklarationer och deras kryssrutor för att slå av och på justeringar. Då kan du jämföra samma stycke utan att ändra ordalydelsen eller layouten. Chrome: Referens för CSS-funktioner

Om du mäter med JavaScript ska du vänta tills det relevanta typsnittet har lästs in i stället för att använda en godtycklig fördröjning. document.fonts.load() kan begära ett angivet snitt; document.fonts.ready löser sig när dokumentets inläsning av teckensnitt och tillhörande layoutåtgärder är klara. Inget av dem ersätter kontrollen av vilket typsnitt som faktiskt används. MDN: FontFaceSet.load(), MDN: FontFaceSet.ready

Beräkna och tillämpa målförhållandet för x-höjden

Målet för numeriska font-size-adjust är ett förhållande, inte en förstoringsprocent. Dividera webbfontens x-höjd med dess enheter per em när de måtten finns för det exakta snittet. Webbläsaren justerar sedan varje valt typsnitt till den andelen av den deklarerade teckenstorleken. W3C: CSS Fonts Module Level 5

Betrakta följande uttryckligen illustrativa värden, som inte är mätningar av något namngivet typsnitt:

Mått Målwebbfont Reservfont
Enheter per em 1,000 1,000
X-höjd i teckensnittsenheter 520 470
Förhållande för x-höjd 0.52 0.47

Vid en deklarerad storlek på 16px är målets x-höjd 16 × 0.52 = 8.32px. För att nå den höjden behöver reservfonten skalas med faktorn 0.52 ÷ 0.47, ungefär 1.106383. Den justerade återgivningsstorleken blir cirka 17.7021px. Beräkningarna illustrerar specifikationens formel; de förutsäger inte den faktiska radbrytningen.

För metoden med egenskapen tillämpar du målförhållandet på texten. Det här CSS-fragmentet förutsätter att exempelstycket har klassen sample-copy:

.sample-copy {
  font-family: "Sample Web", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-size-adjust: 0.52;
}

Här hör 0.52 till den illustrativa webbfonten. Ersätt det med förhållandet för ditt måltypsnitt. Ett felaktigt värde ändrar även storleken på det föredragna typsnittet, eftersom egenskapen tillämpas på alla valda typsnitt, även webbfonten. W3C: CSS Fonts Module Level 5

Om du saknar ett tillförlitligt förhållande beskriver W3C en visuell kalibreringsmetod: jämför två prov med samma typsnitt, storlek och innehåll, där justeringen är avstängd i det ena och ett numeriskt provvärde används i det andra. Börja på 0.5 och finjustera tills de matchar. Använd förstorade, fristående prov vid kalibreringen och återgå sedan till normal lässtorlek för att bedöma resultatet. Behandla ett visuellt uppskattat värde som en approximation. W3C: CSS Fonts Module Level 5

Nyckelordet from-font hämtar målvärdet från det första tillgängliga typsnittet. Om den avsedda webbfonten inte är tillgänglig kan ett annat typsnitt stå för målvärdet. Om reservfonten måste matcha en känd webbfont även när webbfonten aldrig läses in, använder du ett fastställt numeriskt förhållande. MDN: värden för font-size-adjust

Använd ett reservalias när du vill styra ett enskilt snitt

Välj size-adjust när du vill knyta skalningen till ett särskilt reservsnitt. För det illustrativa paret ovan omvandlar du skalningsfaktorn till en procentandel: 100 × 0.52 ÷ 0.47 = 110.6383%. Deskriptorn skalar glyfernas förskjutningar samt konturer och andra tillhörande mått. MDN: size-adjust

Det här alternativa integrationsfragmentet förutsätter att Arial Regular finns lokalt och att målwebbfonten redan är deklarerad. Procentandelen är illustrativ, så mät ditt faktiska par innan du använder den:

@font-face {
  font-family: "Sample Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400;
  font-style: normal;
  size-adjust: 110.6383%;
}

.sample-copy {
  font-family: "Sample Web", "Sample Fallback", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-size-adjust: none;
}

Det syntetiska aliaset gör att justeringen bara gäller den här fontstacken. Dess local()-källor identifierar ett specifikt typsnittssnitt; de väljer inte ett godtyckligt systemtypsnitt utan seriffer. CSS Fonts-specifikationen rekommenderar att fullständiga namn och PostScript-namn anges för matchning mellan plattformar. Om inget av namnen finns tillgängligt går webbläsaren vidare genom den återstående familjelistan. W3C: CSS Fonts Module Level 4

Använd detta som ett alternativ till den föregående metoden. Om du tillämpar font-size-adjust på text som använder ett storleksjusterat snitt kan den avsedda skalningen normaliseras bort, eftersom egenskapen använder det redan överskrivna måttet. MDN: beskrivning av font-size-adjust

Felsök radbrytning och baslinjeskillnader separat

När du har matchat gemenernas höjd jämför du rubriken, etiketten och stycket vid de avsedda bredderna. En användbar ordning är att först kontrollera den upplevda storleken, sedan radsluten och sist den totala blockhöjden. Då skiljer du mellan tre synliga problem som annars kan få dig att fortsätta ändra på en och samma procentsats.

Om gemenernas storlek ser rätt ut men stycket radbryts annorlunda kan du jämföra med en annan reservfont innan du finjusterar skalningen mer. Skalning efter ett enda höjdmått gör inte att olika glyfdesigner får samma förskjutningar för alla tecken. Anteckna det sista ordet på varje rad i webbfonts- respektive reservfontsläget så blir den återstående skillnaden konkret.

Om baslinjen eller blockhöjden fortfarande skiljer sig åt undersöker du ascent-override, descent-override och line-gap-override. De styr layoutmått i stället för att ge ytterligare ett mål för den visuella storleken. Ascent är till exempel måttet ovanför baslinjen som används vid layout av radboxar. Beräkna överskrivningarna utifrån det faktiska typsnittsparet i stället för att kopiera orelaterade procentsatser. MDN: ascent-override

För att få en genererad startpunkt tar Capsizes dokumenterade createFontStack emot mått i den ordning familjerna prioriteras och returnerar både fontFamily och reservfontens fontFaces. Använd båda resultaten tillsammans. Dokumentationen innehåller också @capsizecss/metrics för inkluderade typsnitt och @capsizecss/unpack för att extrahera mått från en anpassad fil. Även genererade deklarationer måste testas med din exempellayout. Capsize-dokumentation

Bevara webbläsarens layout och textrendering

Mätningar på canvas kan hjälpa dig att jämföra strängar, men de besvarar mer avgränsade frågor. WHATWG definierar measureText().width som teckenbredd, medan faktiska mätningar av begränsningsrutan beskriver den återgivna texten. Canvas förbereder en tänkt rad med obegränsad bredd, så bredden mäter inte ett radbrutet stycke i DOM. WHATWG: HTML Standard, Canvas

Behåll hela ord och meningar tillsammans i testet. Undvik att återskapa texten som individuellt placerade tecken eller att anta att summan av teckenbredder återskapar en formad sträng. CSS anger villkor för formning över inline-gränser, även gränser med ändrat mellanrum eller justering. Behåll komponentens vanliga struktur när du kontrollerar reservfonten. W3C: CSS Text Module Level 3

Kontrollera webbläsarstöd och slutför jämförelsen

MDN anger att grundläggande font-size-adjust har Baseline 2024-status och att size-adjust har haft brett stöd sedan september 2023. Det betyder inte att alla nyare mått eller nyckelord stöds i en äldre webbläsare. Läs kompatibilitetstabellerna för den syntax du faktiskt använder. MDN: font-size-adjust, MDN: size-adjust

Om ett avancerat måttformat saknas kan du använda numerisk normalisering av x-höjden om det passar uppgiften, eller en deskriptor som stöds och gäller en specifik reservfont. Om den nödvändiga justeringen inte stöds alls behåller du en visuellt liknande reservfont och kontrollerar den ojusterade layouten i den webbläsaren.

Avsluta med att upprepa jämförelsen för varje vikt och stil du använder och sedan i de Mac-webbläsare du tänker stödja. Kontrollera vilket snitt som används varje gång. Behåll justeringen endast om testsidans rubrik, etikett och stycke har en godtagbar upplevd storlek, radbrytning och mellanrum i både webbfonts- och reservfontsläget.

Källor