Typsnitt och CSS
CSS är det mest effektiva sättet att justera typsnitt på din webbsida. Du kan styra typsnittet familj, storlek, färg, vikt och många andra aspekter av typografi.
Teckensnittegenskaper i CSS är ett av de vanligaste sätten att göra din sida mer distinkt och unik. Det är lätt att ändra färg, storlek och jämnt ansikte (teckensnittet i sig) av din text med CSS-teckensnitt.
- Färg
- typsnittsfamilj
- textstorlek
Det finns tre delar i ett teckensnitt:
- Färg
- Detta är den färg som teckensnittet kommer att visas som på skärmen.
- storlek
- Det här är hur stor eller liten teckensnittet kommer att göra på skärmen.
- ansikte
- Detta är typsnittsfamiljen, det som ofta kallas själva fonten.
Teckensnittsfärger
För att ändra textens färg, använd bara egenskapen CSS-färgstil. Du kan använda antingen färgnamn eller hexadecimala koder. Som med all färg på webben är det bäst att använda webbläsarsäkra färger.
Prova följande stilar på dina webbsidor:
denna teckensnitt är färgad röddenna typsnitt är färgad blå
Font storlekar
När du ställer in teckensnittstorleken på webben kan du ställa in den i relativa storlekar eller vara väldigt specifika med hjälp av pixlar, centimeter eller inches. Men de mer exakta typsnittstorlekarna är avsedda att användas för utskrift och inte för webbsidor, där alla som tittar på din webbplats kan ha en annan upplösning, bildskärmsstorlek eller standardfontsättning. Om du väljer 15px som din standardstorlek, kan du alltså obehagligt överraska dig för att se hur stor eller liten ditt teckensnitt ger till dina kunder.
Jag rekommenderar att du använder ems för teckenstorlek. Ems gör det möjligt för din sida att vara tillgänglig oavsett vem som tittar på den och ems är avsedda för skärmåtergivning. Lämna dina pixlar och poäng för utskrift av bilder. För att ändra typsnittstorlek, sätt följande stil på din webbsida:
denna typsnitt är 1emdenna typsnitt är .75emdenna typsnitt är 1.25em
Font Faces
Ansiktet på din typsnitt är vad många människor tänker på när de tänker "font". Du kan deklarera vilket typsnitt som du vill, men kom ihåg att om din läsare inte har det tecknet installerat, kommer deras webbläsare att försöka hitta en matchning för det, och deras sida kommer inte att se ut som du tänkte.
För att lösa detta problem kan du ange en lista med ansiktsnamn, åtskilda av kommatecken, för att webbläsaren ska använda i önskad ordning. Dessa kallas fontstaplar. Tänk på att en vanlig typsnitt på en dator (t.ex. Arial) kanske inte är standard på en Macintosh. Så du bör alltid se dina sidor med en minimalt installerad maskin (och helst på båda plattformarna) för att se till att din sida ser ut som designad även med minimala teckensnitt.
En av mina favoritfontsstaplar är Den här uppsättningen är en sans-serif font-samling och medan genève och arial inte ser väldigt likartade ut, är de båda ganska standard på Macintosh och Windows-datorer. Jag inkluderar helvetica och helv för kunder på andra operativsystem som Unix eller Linux som kanske inte har ett robust typfält bibliotek.
denna typsnitt är sans-serifdenna typsnitt är serif
