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

Hitta en bra typsnittsstapel som förmedlar både stil på din webbplats men är också tillförlitligt på de flesta webbplatser där ute kan vara knepigt. Om du använder icke-webbsäkra teckensnitt kanske din webbplats inte ser ut som du tänker det när webbläsaren ersätter något överraskande med ditt snygga teckensnitt.

Dessa typsnittsstaplar är åtskilda av familj (serif, monospace, etc.). När du använder ett teckensnitt som inte är ett webbsäkert teckensnitt bör du lägga det först i din teckensnittsstack och sedan lägga till en av dessa staplar till slutet. Välj den teckensnittsstack som är närmast i stil och titta efter ditt önskade teckensnitt.

Sans Serif Web Safe Font Stacks

Sans serif-text är bra att läsa på webbsidor eftersom det inte finns några serifs som blir 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', Geneva, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
instagram viewer

font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Genève, sans-serif;

Serif Web Safe Font Stacks

Serif-teckensnitt fungerar bra för rubriker. Den större typen av rubriker innebär att seriferna 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 återge kod och andra typsnitt som ser bäst ut i ett teckensnitt där alla tecken har samma bredd - som skrivmaskinteckensnitt.

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

Kursiva typsnittsstaplar

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

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

Fantasy Font Stacks

Precis som kursiva teckensnitt kan fantasy-teckensnitt 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 typsnittsstack som en som jag använde ovan i sans serif kategori, det beror på att slag och kol är så distinkta att vissa människor anser dem vara fantasier teckensnitt.

font-family: Impact, Charcoal, fantasy; 

Dingbats, Wingdings eller Symbol Font Stacks

Dingbats eller wingdings är symbolsteckensnitt som visar små ikoner eller bilder istället för bokstäver. Det finns ingen generisk typsnitt för dessa, så vissa datorer kan visa mycket olika teckensnitt än du förväntar dig. Plus bara Internet Explorer visar symbolerna. Firefox och andra webbläsare visar helt enkelt texten i webbläsarens standardteckensnitt.

font-family: Symbol;
teckensnittsfamilj: Webdings;
font-family: Wingdings, 'Zapf Dingbats';