【发布时间】：2011-01-09 00:03:57
【问题描述】：
如何制作跨浏览器、跨平台和所有设备兼容的css字体栈？
【问题讨论】：
标签： css fonts mobile-website
【发布时间】：2011-01-09 00:03:57
【问题描述】：
您无法保证将在移动设备上使用的字体与保证在普通计算机上可用的字体相同。
一个安全的选择是使用可以由移动浏览器解释的通用字体系列来向您显示相关字体，例如
font-family: serif; /* (e.g., Times) */
font-family: sans-serif; /* (e.g., Helvetica) */
font-family: monospace; /* (e.g., Courier) */
【讨论】：
-
什么是 verdana 和 arial？
-
Verdana 和 Arial 是无衬线字体
-
那么为什么不
font-family: Verdana, Arial, sans-serif如果verdana和arial在设备中不可用，那么它可以使用serif。 -
因为如果您的字体堆栈在任何地方指定了实际字体的名称，它将在缺少该字体的客户端上触发字体别名，例如“网站要求输入“Arial”，我会给出它是“Liberation Sans”，用户讨厌它，但它具有相同的尺寸（指标），因此它可以解决任何固定像素设计缺陷。
-
这是我投过的最不愉快的一票。 ;)
最好的解决方案是在任何特定字体之后始终提供generic font family：
font-family: "Foo Regular", "Bar Sans", sans-serif;
【讨论】：
【讨论】：
-
不幸的是，对于移动网络并没有多大好处，因为它们经常使用完全不同的字体
-
@MichaelMoriarty 是的 - 不同的是你在我回答 6 年后发布了它，今天已经过时了。可悲的是 Stackoverflow 已经变成...
-
对不起，伊斯威。我没查日期……按时间倒序……
它在 W3C 建议的 15.3 中关于“font-family”属性指出，您应该在字体堆栈中使用备用字体，以便您的网站访问者有一些可行的选择。
我使用的“网络安全”字体堆栈，涵盖了大多数设备（如果不是所有设备）如下：
/* 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}
这包括标题、段落、代码示例的等宽、特殊项目的幻想和强调的草书。您可能只需要一个用于标题（H1~H6），另一个用于正文：
body {font-family: Verdana,Arial,sans-serif}
h1, h2, h3, h4, h5, h6 {font-family: Georgia,'Times New Roman',serif}
查看以下 2010 年的备忘单，其中包括 Linux 和 iOS。它给出了 Windows、Mac、Linux 和 iOS 之间的平均使用百分比：Web Safe Fonts
【讨论】：
来自 Google 顶部的一些“Web 安全字体”链接：
【讨论】：
忘记跨浏览器跨平台字体堆栈吧，Web 示例通常只关心基本拉丁语的 windows 和 OSX，它们在国际语言和 Linux 以及新形式因素上失败。
由于许可的原因，Linux 从未使用与 Windows 和 OSX 相同的字体，而且字体设计工具已经变得足够成熟，如今您会发现很多多样性（并不是说创建大编码字体很容易，但很多用户只关心关于涵盖其特定语言的字体）。
字体创建已经变得足够便宜，大公司（包括移动制造商）现在喜欢通过为大版本（新设备或主要操作系统版本）委托新字体来实现差异化。
当字体调查仍然很流行时，DejaVu 字体系列在 Linux 上的影响力很大，但情况可能不再如此。 DejaVu 和 Arial 有不同的指标。
只需在您的堆栈中使用通用 CSS 字体系列，避免任何 helvetica 衍生产品，不要使用依赖于特定字体指标的设计，您会没事的。
【讨论】：