Obs! Den här sidan är relaterad till att ändra typsnitt, storlek och färg på en webbsida. För Microsoft Word, se vår sida om hur du ändrar typsnittets färg, storlek eller typ i Word.

Detta dokument innehåller anvisningar om hur du ändrar en typsnitt och dess färg på en webbsida. Den korrekta syntaxen som går framåt är att använda Cascading Style Sheets tillsammans med klass- eller ID-väljare snarare än en inline-stilattribut eller typsnittstagg, som avlägsnas. Även om det är värt att notera att dessa två metoder fortfarande fungerar med de flesta webbläsare.

För att fortsätta väljer du den metod du vill lära av eller läsa varje avsnitt.

Om du planerar att ändra teckensnittet och dess färg endast en gång på en webbsida måste du ändra dess attribut i elementetiketten. Med hjälp av stilattributet kan du ange teckensnittets ansikte och färg med teckensnittsfamilj, färg och teckensnittstorleken med teckenstorlek, som visas i exemplet nedan.

Exempel kod

Den här texten har teckensnittet Courier, Blue, och 20px.

Resultat

Den här texten har Courier-teckensnittet, är Blått och 20px i storlek.

Använda CSS för en eller flera sidor

Anpassad typsnitt för en sida

I huvuddelen av din webbsida kan du infoga kod mellan flikarna för att ändra utseendet på din text i olika delar. Den nästa blå rutan innehåller exempelkod som, en gång kallad, skulle ändra ditt teckensnitt till Courier och färg det rött. Som du kan se har vi definierat klassnamnet som "anpassat".

 .custom {font-family: Courier; färgen röd; font-size: 20px; } 

En gång definierad kan denna styling tillämpas på de flesta element i din sida genom att fästa klassen "anpassad" till dem. Följande ruta visar två kodrubriker och deras respektive resultat.

Exempel

Hela meningen är röd och kurir

Endast ordet TEST är röd och Courier.

Resultat

Hela meningen är röd och kurir.

Endast ordet TEST är röd och Courier.

Anpassad typsnitt för många sidor

Importera en extern CSS-fil kan vara mycket fördelaktig eftersom det tillåter användare att ändra regler för flera sidor samtidigt. Följande avsnitt visar ett exempel för att skapa en grundläggande CSS-fil som ändrar teckensnittet och det är färg för de flesta element. Den här filen kan laddas i mer än en webbsida, till och med en hel sida.

Med en grundläggande textredigerare lagras följande text som en .css-fil för import.

 @charset "utf-8";
.courier {font-family: Courier; färg: # 005CB9; } 

När den föregående texten har placerats i en .css-fil (vi har namngett vår basic.css ) kan du länka till den från någon annan sida med en linje som liknar följande exempel.

Tips: Användare kan ändra attributen för element på en sida genom att ändra koden i den importerade .css-filen.

Typsnittslösning

Även om det är borttagna kan HTML-taggen fortfarande användas och kan vara nödvändig för att användas med vissa onlinetjänster. När du använder FONT-taggen måste du inkludera ansiktsattributet, som beskriver det teckensnitt som ska användas. I exemplet nedan använder vi Courier-teckensnittet och den hexadecimala färgkoden # 005CB9, som är en mörkblå.

Exempel kod

 Ett speciellt typsnitt exempel. 

Resultat