Att kunna styla olika aspekter av din HTML-sida är en viktig färdighet för webbdesigners och utvecklare. För att utforma dina HTML-webbsidor med teckensnittsfärger och storlekar måste du vara bekant med CSS. För att rikta in teckensnittsstorlek specifikt kan du använda CSS textstorlek fast egendom.

Om du letar efter ett sätt att ändra HTML-teckensnittsstorlek med CSS, har vi dig täckt. Låt oss dyka in genom att börja med en introduktion till CSS textstorlek fast egendom.

Förstå egenskapen för CSS-typsnittsstorlek

De textstorlek egenskap i CSS är praktiskt när du behöver ändra storleken på HTML-text. Du kan använda den här egenskapen för att ändra storleken på varje textstycke på en HTML-sida eller rikta in sig på specifika element för att ändra.

Inriktning på specifika element rekommenderas vanligtvis eftersom du vanligtvis inte vill att allt ska ha samma storlek. Text som inte följer en visuell hierarki är svår att skanna igenom och särskilja rubriker på högre nivå från rubriker på låg nivå.

I enklare termer, missbruka inte textstorlek fast egendom. Om du vill att en rubrik ska sticka ut finns det olika HTML-rubriktaggar för det. Kolla in vår HTML essentials fuskblad för olika taggar, attribut och mer tillsammans med förklaringar.

CSS textstorlek egenskapen tar in två typer av värden: absoluta och relativa.

Absoluta längdvärden (dvs. px) är fixerade medan relativa (t.ex. em och ex) är flexibla. Till exempel för en typsnittsrelativ enhet som em, storleken bestäms vanligtvis av det överordnade elementets teckenstorlek. Men rotbaserade teckensnittsrelativa enheter som rem påverkas av rotelementets teckenstorlek ().

Var och en har sina för- och nackdelar, men i huvudsak att hålla saker fokuserade kommer vi inte att diskutera dem i den här artikeln.

Hur man ändrar teckenstorleken för ett HTML-element i CSS

Du kan ändra teckenstorleken på HTML-text genom att använda någon standard CSS-syntax.

Ange först väljaren (texten du vill ändra) och öppna några hängslen. Ange sedan textstorlek egenskap följt av ett kolon, ange den specifika storlek du vill att din HTML-text ska presenteras i och stäng av den med semikolon.

Här är syntaxen:

CSS-väljare {
 teckensnittsstorlek: värde;
}

För att få ett bättre grepp om konceptet, granska följande HTML-schema som har några extra rader kod (en rubrik och ett stycke):

Det här är min första rubrik

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Om du vill ändra teckenstorleken för styckeelementet måste du välja det (via en klass, tagg eller id) och använda CSS textstorlek egenskap, ställ in ett anpassat värde med dina önskade enheter. I vårt exempel använder vi pixlar (px).

p {
 teckenstorlek: 18px;
}

Även om inline CSS i allmänhet inte rekommenderas i stora projekt, kan du också använda den för att ändra storleken på HTML-text. Genom att ta anteckningar från den externa CSS-koden ovan kan vi implementera samma sak inline så här:

Det här är min första rubrik

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Text i sid HTML-taggen kommer nu att ha en ny anpassad storlek.

Relaterad: Viktiga CSS-tips och tricks som alla utvecklare bör känna till

Felsökning av fel vid ändring av HTML-teckensnittsstorlek i CSS

Även om hela processen med att ändra textstorlek i CSS kan verka lätt, kanske det inte alltid går ut exakt som du förväntar dig. Om du upplever problem, börja med att kontrollera om du sparat ändringarna i din fil (se även till att du länkar ditt CSS-ark till din HTML-fil). Om du gjorde det, försök att använda inline-metoden och uppdatera sedan sidan.

Om det fungerar kan det vara ett problem med din CSS-kod. Prova att använda !Viktig taggen, och om det fungerar måste det finnas någon kod i konflikt. Analysera din CSS-kod rad för rad för att försöka fånga det felet.

10 enkla CSS-kodexempel du kan lära dig på 10 minuter

Behöver du hjälp med CSS? Prova dessa grundläggande CSS-kodexempel till att börja med och använd dem sedan på dina egna webbsidor.

Läs Nästa

Om författaren