What are cross-browser, cross platfom web safe fonts?

Question

如何使跨浏览器，跨平台和所有设备兼容的css字体堆栈？

Answer 1

You cannot guarantee the fonts that will be used on a mobile device the same way you can guarantee which fonts are available on a normal computer.

A safe bet is to use a generic font family that can be interpreted by the mobile browser to show you the relevant font, eg

font-family: serif; /* (e.g., Times) */
font-family: sans-serif; /* (e.g., Helvetica) */
font-family: monospace; /* (e.g., Courier) */

Answer 2

最好的解决方案是在任何特定字体之后始终提供通用字体系列 ：

font-family: "Foo Regular", "Bar Sans", sans-serif;

Answer 3

Maybe this link can give you some more ideas:

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Using the above font families never gave me problems.

Answer 4

也许这可以帮助您完成任务： 与Mac和Windows操作系统，Microsoft Office和Adobe Creative Suite捆绑在一起的字体矩阵

Answer 5

It points out in 15.3 of the W3C Recommendation regarding the 'font-family' property that you should have fallback fonts in a font stack so that your website visitor has some viable choices.

The 'web safe' font stacks I use, which cover most if not all devices are as follows:

/* Web Safe Font Stacks (classes set in CSS) */
.head {font-family: Georgia,'Times New Roman',serif}
.para {font-family: Verdana,Arial,sans-serif}
.mono {font-family:'Courier New',Courier,monospace}
.fant {font-family: Papyrus,Impact,fantasy}
.curs {font-family:'Apple Chancery','Lucida Calligraphy',cursive}

This covers headers, paragraphs, monospace for code samples, fantasy for special items, and cursive for emphasis. You may just need one for headers (H1~H6) and another for body text:

body {font-family: Verdana,Arial,sans-serif}
h1, h2, h3, h4, h5, h6 {font-family: Georgia,'Times New Roman',serif}

Check the following cheatsheet from 2010 that includes Linux and iOS. It gives the average percentages for usage between Windows, Mac, Linux, and iOS: Web Safe Fonts

Answer 6

Forget about cross browser cross platform font stacks, the web examples usually only care about windows and OSX for basic latin, they fail on international languages and Linux, and new form factors.

Linux never used the same fonts as Windows and OSX for licensing reasons, and font design tools have become mature enough you find a lot of diversity nowadays (not that creating a large encoding font is easy, but a lot of users only care about fonts that cover their particular language).

Font creation has become cheap enough big corporations (including mobile manufacturers) now like to differentiate by commissioning new fonts for big releases (new device or major OS version).

When font surveys were still popular the DejaVu font family had a lot of reach on Linux, that may not be the case anymore. DejaVu and Arial have different metrics.

Just use generic CSS font families in your stack, avoid any helvetica derivative, do not use a design that depends on particular font metrics and you'll be ok.

Answer 7

Some "Web Safe Fonts" links from Google top:

https://www.cssfontstack.com/

http://web.mit.edu/jmorzins/www/fonts.html