blocks|key|1349399|text|您无法保证将在移动设备上使用的字体，就像您可以保证哪些字体在普通计算机上可用一样。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1349400|一个安全的选择是使用移动浏览器可以解释的通用字体系列来显示相关的字体，例如|1349401|font-family:+serif;+/*+(e.g.,+Times)+*/
font-family:+sans-serif;+/*+(e.g.,+Helvetica)+*/
font-family:+monospace;+/*+(e.g.,+Courier)+*/|code-block|syntax|javascript|1349402|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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.

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

blocks|key|1349288|text|最好的解决方案是始终在任何特定字体后提供generic+font+family：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1349289|font-family:+"Foo+Regular",+"Bar+Sans",+sans-serif;|style|CODE|1349290|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/CSS2/fonts.html#generic-font-families^0|K|J|0|0|0|1F|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@$A|U|B|V|F|G]]|9|@]|C|$]]|$1|H|3|-4|5|6|7|W|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]]]

The best solution is to always supply a <a href="http://www.w3.org/TR/CSS2/fonts.html#generic-font-families" rel="noreferrer">generic font family</a> after any specific fonts:

<code>font-family: "Foo Regular", "Bar Sans", sans-serif;</code>

blocks|key|1349331|text|也许这个链接可以给你更多的想法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1349332|http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html|offset|length|1349333|使用上面的字体系列从来没有给我带来问题。|1349334|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1J|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

Maybe this link can give you some more ideas:

<a href="http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html" rel="nofollow noreferrer">http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html</a>

Using the above font families never gave me problems.

blocks|key|1349444|text|也许这可以帮助你完成你的任务：Matrix+of+fonts+bundled+with+Mac+and+Windows+operating+systems,+Microsoft+Office+and+Adobe+Creative+Suite|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1349445|entityMap|0|LINK|mutability|MUTABLE|url|http://media.24ways.org/2007/17/fontmatrix.html^0|F|2X|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Perhaps this can help you on your quest: <a href="http://media.24ways.org/2007/17/fontmatrix.html" rel="nofollow noreferrer">Matrix of fonts bundled with Mac and Windows operating systems, Microsoft Office and Adobe Creative Suite</a>

blocks|key|1134089|text|它在W3C推荐的关于'+font+-family‘属性的15.3中指出，你应该在字体堆栈中有备用字体，以便你的网站访问者有一些可行的选择。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1134090|我使用的“web+safe”字体堆栈，如果不是所有设备，也包括大多数设备，如下所示：|1134091|/*+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}|code-block|syntax|javascript|1134092|这包括标题、段落、用于代码示例的等宽、用于特殊项目的幻想和用于强调的草书。您可能只需要一个用于标题(H1~H6)，另一个用于正文：|1134093|body+{font-family:+Verdana,Arial,sans-serif}
h1,+h2,+h3,+h4,+h5,+h6+{font-family:+Georgia,'Times+New+Roman',serif}|1134094|请查看以下2010年的小抄，其中包括Linux和iOS。它给出了Windows、Mac、Linux和iOS之间的平均使用百分比：Web+Safe+Fonts|offset|length|1134095|entityMap|0|LINK|mutability|MUTABLE|url|https://i.stack.imgur.com/zROeV.jpg^0|0|0|0|0|0|1S|E|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

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:

<pre><code>/* 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}
</code></pre>

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:

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

Check the following cheatsheet from 2010 that includes Linux and iOS. It gives the average percentages for usage between Windows, Mac, Linux, and iOS: <a href="https://i.stack.imgur.com/zROeV.jpg" rel="nofollow noreferrer">Web Safe Fonts</a>

blocks|key|1134211|text|来自Google+top的一些"Web安全字体“链接：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1134212|https://www.cssfontstack.com/|offset|length|1134213|http://web.mit.edu/jmorzins/www/fonts.html|1134214|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|T|0|0|0|16|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@$D|R|E|S|1|T]]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|H|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]|O|$5|K|L|M|A|$N|G]]]]

Some "Web Safe Fonts" links from Google top:

<a href="https://www.cssfontstack.com/" rel="nofollow noreferrer">https://www.cssfontstack.com/</a>

<a href="http://web.mit.edu/jmorzins/www/fonts.html" rel="nofollow noreferrer">http://web.mit.edu/jmorzins/www/fonts.html</a>

blocks|key|1134152|text|忘记跨浏览器、跨平台的字体堆栈吧，web示例通常只关心windows和OSX的基本拉丁语，它们在国际语言和Linux以及新的外形因素上都失败了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1134153|由于许可的原因，Linux从来没有使用过与Windows和OSX相同的字体，而且字体设计工具已经足够成熟，你会发现现在有很多不同的字体(并不是说创建一个大的编码字体很容易，而是很多用户只关心覆盖他们特定语言的字体)。|1134154|字体创建已经变得足够便宜，大公司(包括移动制造商)现在喜欢通过为大版本(新设备或主要操作系统版本)委托新字体来区分。|1134155|当字体调查还很流行的时候，DejaVu字体家族在Linux上有很大的影响力，但现在可能不是这样了。DejaVu和Arial有不同的指标。|1134156|只需在堆栈中使用通用CSS字体系列，避免任何helvetica派生字体，不要使用依赖于特定字体度量的设计，您就会没事的。|1134157|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|N|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|O|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

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.

How to make cross browser, cross platform and all devices compatible css font stack?

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

Windows

Linux

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

问什么是跨浏览器、跨平台的web安全字体？
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问什么是跨浏览器、跨平台的web安全字体？EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问什么是跨浏览器、跨平台的web安全字体？
EN