Skip to main content

Använd dessa pålitliga HTML-teckensnitt på dina webbsidor

(11/25) Using Web Safe Font Stacks (April 2025)

(11/25) Using Web Safe Font Stacks (April 2025)
Anonim

Att hitta en bra typsnittstack som överför både stilen på din webbplats men också är pålitlig över de flesta webbplatser där ute kan vara svårt. Om du använder icke-webbsäkra teckensnitt kanske din webbplats inte ser ut som du tänker på när webbläsaren ersätter något som är överraskande för ditt fina teckensnitt.

Dessa teckensnittsstaplar separeras av familj (serif, monospace, etc.). När du använder ett teckensnitt som inte är ett webbsäker teckensnitt ska du lägga det först i din teckensnittsstack och sedan lägga till en av dessa staplar till slutet. Välj typsnittstapeln som är närmast i stil och leta efter önskad typsnitt.

Sans Serif Web Safe Font Stacks

Sans seriftext är bra för att läsa på webbsidor eftersom det inte finns några serifs att bli suddiga på skärmen.

font-family: Arial, Helvetica, sans-serif;font-family: 'Arial Black', Gadget, sans-serif;font-family: Impact, Charcoal, sans-serif;font-family: "MS Sans Serif", Genève, sans-serif;font-family: Tahoma, Genève, sans-serif;font-family: "Trebuchet MS", Helvetica, sans-serif;font-family: Verdana, Genève, sans-serif;

Serif Web Safe Font Stacks

Serif typsnitt fungerar bra för rubriker. Den större typen av rubriker innebär att serifs inte blir suddiga på bildskärmar.

font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;font-family: Bookman, serif;font-family: Georgia, serif;font-family: "MS Serif", "New York", serif;font-family: "Times New Roman", Times, Serif;

Monospace Font Stacks

Monospace-teckensnitt används vanligtvis för att göra kod och andra typer av stilar som ser bäst ut i ett teckensnitt där alla tecken har samma bredd som skrivmaskinens teckensnitt.

font-family: Courier, monospace;font-family: "Courier New", Courier, monospace;font-family: "Lucida Console", Monaco, monospace;

Visa monospace font stack exempel.

Cursive Font Stacks

Kursiva teckensnitt kan vara svåra att läsa, och den vanligaste som finns på de flesta system (Comic Sans) är ogillas av så många människor som det.

font-family: 'Comic Sans MS', cursive;

Fantasy Font Stacks

I likhet med kursiva teckensnitt kan fantasiefonter vara svåra att läsa, och de är ännu mindre vanliga i de flesta system. Faktum är att du kanske märker att jag använder samma typsnittstapel som en som jag använde ovan i kategorin sans serif, det beror på att påverkan och träkol är så distinkt att vissa människor anser dem fantasiefonter.

font-family: Impact, Charcoal, fantasy;

Dingbats, Wingdings eller Symbol Font Stacks

Dingbats eller wingdings är symbol teckensnitt som visar lite ikoner eller bilder i stället för bokstäver. Det finns ingen generisk typsnitt för dessa, och så kan vissa datorer visa mycket olika teckensnitt än vad du förväntar dig. Dessutom visas endast symbolerna i Internet Explorer. Firefox och andra webbläsare visar bara texten i standardfonten för webbläsaren.

font-family: Symbol;font-family: Webdings;font-family: Wingdings, "Zapf Dingbats";