How to make cross browser, cross platform and all devices compatible css font stack?
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, e.g.
font-family: serif; /* (e.g., Times) */
font-family: sans-serif; /* (e.g., Helvetica) */
font-family: monospace; /* (e.g., Courier) */
The best solution is to always supply a generic font family after any specific fonts:
font-family: "Foo Regular", "Bar Sans", sans-serif;
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.
Perhaps this can help you on your quest: Matrix of fonts bundled with Mac and Windows operating systems, Microsoft Office and Adobe Creative Suite
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
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.
Some "Web Safe Fonts" links from Google top:
来源：https://stackoverflow.com/questions/2130790/what-are-cross-browser-cross-platfom-web-safe-fonts