什么是跨浏览器、跨平台网络安全字体？

Question

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

Answer 1

您无法保证移动设备上将使用的字体，就像保证普通计算机上可用的字体一样。

一个安全的选择是使用可以由移动浏览器解释的通用字体系列，以向您显示相关字体，例如

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

它在 W3C 建议中关于“font-family”属性的 15.3 中指出，您应该在字体堆栈中拥有后备字体，以便您的网站访问者有一些可行的选择。

我使用的“网络安全”字体堆栈涵盖了大多数（如果不是全部）设备，如下所示：

/* 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 之间的平均使用百分比：网络安全字体

Answer 4

忘记跨浏览器跨平台字体堆栈，Web 示例通常只关心 Windows 和 OSX 的基本拉丁语，它们在国际语言和 Linux 以及新的形式因素上失败。

由于许可原因，Linux 从未使用与 Windows 和 OSX 相同的字体，并且字体设计工具已经足够成熟，您现在会发现很多多样性（并不是说创建大型编码字体很容易，而是很多用户只关心那些字体）涵盖他们的特定语言）。

字体创建已经变得足够便宜，大公司（包括移动制造商）现在喜欢通过为大型版本（新设备或主要操作系统版本）委托新字体来实现差异化。

当字体调查仍然流行时，DejaVu 字体系列在 Linux 上有很大的影响力，但情况可能不再如此了。 DejaVu 和 Arial 有不同的指标。

只需在堆栈中使用通用 CSS 字体系列，避免任何 helvetica 衍生品，不要使用依赖于特定字体规格的设计，就可以了。