När rubriken i en Tailwind-sida ser för tunn ut trots att du lagt till en viktklass, behöver felet inte ligga i klassen. `font-semibold` ger normalt vikten 600, men resultatet beror också på vilka vikter som faktiskt finns i det inlästa typsnittet.
Välj vikt efter textens roll och typsnittets stöd
- `font-normal` motsvarar 400, medan `font-semibold` motsvarar 600.
- `font-bold` är 700, men hjälper inte om fontfilen eller dess deklaration saknar den vikten.
- `font-[550]` kan ange en egen vikt i Tailwind, om typsnittet stöder den.
- Kontrollera först den genererade CSS-koden och sedan `@font-face` om resultatet inte förändras.
Tailwind-klassen anger ett värde, inte en garanti för utseendet
Du kan byta från `font-normal` till `font-bold` och ändå knappt se någon skillnad. Klassen sätter ett CSS-värde, men webbläsaren måste också ha en passande fontfil att använda. Det är skillnad på deklarerad vikt och faktiskt ritad vikt.
I Tailwinds dokumentation motsvarar `font-thin` 100, `font-extralight` 200, `font-light` 300, `font-normal` 400 och `font-medium` 500. De tyngre stegen är `font-semibold` 600, `font-bold` 700, `font-extrabold` 800 och `font-black` 900, enligt Tailwinds dokumentation om font weight.
Jag tycker att 400, 600 och 700 räcker långt för de flesta gränssnitt: brödtext, mellanrubrik och tydlig rubrik får varsin roll utan att varje element ropar efter uppmärksamhet. Men om din fontfamilj bara har regular och bold behöver du anpassa valet efter de filer som faktiskt är laddade.
En mellanvikt kan ge tydligare hierarki än fetstil överallt
En lång sida med många rubriker i 700 kan kännas tung, särskilt när själva brödtexten också är kompakt. Testa 600 för mellanrubriker och spara 700 till sidans huvudrubrik eller en kort uppmaning.
En enkel utgångspunkt är att använda `font-normal` för längre stycken, `font-medium` för diskreta etiketter och `font-semibold` för rubriker som ska synas utan att dominera. `font-bold` passar när kontrasten behöver vara starkare, exempelvis på en kort knapptext. Det är ett typografiskt startläge, inte en regel som gäller varje typsnitt.
Ändra en sak i taget. Om du samtidigt byter vikt, storlek och radavstånd blir det svårt att se vilken ändring som gjorde texten lättare att läsa.
Felsök vikten genom att följa kedjan från klass till fontfil
När sidan inte ändras som du väntar dig, börja med den enklaste kontrollen: finns klassen i den CSS som byggts? Om svaret är ja, gå vidare till fontdeklarationen i stället för att lägga på fler viktklasser.
| Situation | Trolig orsak | Nästa steg |
|---|---|---|
| Ingen synlig skillnad efter att du lagt till `font-bold` | Fontfamiljen har kanske ingen separat fet fil, eller också matchar inte `@font-face`-deklarationen vikten. | Kontrollera vilken fontfil som laddas och vilka vikter dess deklaration anger. |
| Klassen syns i HTML men inte i genererad CSS | Byggsteget kan ha missat filen där klassnamnet finns, särskilt om klassen sätts ihop dynamiskt. | Kontrollera Tailwinds källfiler och byggresultat; använd kompletta klassnamn i koden. |
| En egen vikt som `font-[550]` saknar effekt | Fonten stöder kanske inte just den vikten, eller så är det inte en variabel font med motsvarande viktintervall. | Kontrollera fontens specifikation och deklarerade viktintervall innan du justerar värdet. |
| Texten blir fetare än avsett i ett visst element | En annan CSS-regel eller ett ärvt värde kan skriva över den förväntade stilen. | Inspektera elementets beräknade `font-weight` i webbläsarens utvecklarverktyg. |
För egna fontfiler anger `@font-face` vilka vikter webbläsaren kan koppla till en familj. MDN:s dokumentation om `@font-face` visar hur enskilda vikter eller ett intervall deklareras. Om filen är variabel ska deklarationen spegla det intervall som fonten faktiskt stöder.
Variabla typsnitt kan använda vikter mellan standardstegen
Standardklasserna hoppar i steg om 100, men en variabel font kan ofta hantera mellanliggande värden. Tailwind låter dig ange ett sådant direkt, exempelvis font-[550]; dokumentationen beskriver också syntaxen font-(weight:--my-font-weight) för en CSS-variabel.
Den extra precisionen är användbar när 500 ser för lätt ut och 600 för tungt. Den skapar däremot inte en ny vikt i fontfilen. Om typsnittet inte stöder värdet kan webbläsaren välja en närliggande tillgänglig vikt. MDN förklarar hur viktaxeln fungerar i sin guide till variabla typsnitt.
Jag skulle välja en mellanvikt först när fonten verkligen stöder den och den löser ett synligt problem i gränssnittet. Annars blir `font-medium` eller `font-semibold` lättare att underhålla för resten av teamet.
Skapa en egen vikt när samma värde återkommer
Om ett projekt återanvänder en ovanlig vikt kan du ge den ett begripligt namn i Tailwind v4:s tema. Exempelvis skapar --font-weight-book: 450; i @theme utility-klassen font-book, enligt dokumentationen för anpassning av Tailwinds font-weight-utilities.
@theme {
--font-weight-book: 450;
}Använd bara ett sådant token om fonten stöder 450 och värdet fyller en tydlig funktion, till exempel en något kraftigare brödtext utan att gå hela vägen till medium. För ett enstaka undantag är en godtycklig viktklass enklare; för ett återkommande designsystem är ett namngivet tema lättare att läsa.
Låt fontfilen sätta gränsen för dina viktklasser
När vikten känns fel, kontrollera först att Tailwind genererar klassen och att rätt CSS-regel vinner. Gå sedan till fontfilen och dess deklarerade intervall; först därefter är det meningsfullt att prova en annan vikt.
En användbar tumregel: välj en standardklass när fonten har en motsvarande vikt, använd ett eget numeriskt värde när en variabel font stöder det, och ändra fontdeklarationen när rätt fil aldrig laddas. Då slipper du försöka lösa ett fontproblem med fler utility-klasser.