27

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

4

7 回答 7

20

您不能保证将在移动设备上使用的字体与保证在普通计算机上可用的字体相同的方式。

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

font-family: serif; /* (e.g., Times) */
font-family: sans-serif; /* (e.g., Helvetica) */
font-family: monospace; /* (e.g., Courier) */
于 2010-01-26T22:04:03.297 回答
15

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

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

于 2010-01-25T07:48:52.457 回答
4

也许这个链接可以给你更多的想法：

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

使用上述字体系列从未给我带来任何问题。

于 2010-01-25T12:43:55.333 回答
1

也许这可以帮助您完成任务：与 Mac 和 Windows 操作系统、Microsoft Office 和 Adob​​e Creative Suite 捆绑的字体矩阵

于 2010-06-23T03:42:56.587 回答
1

它在 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

于 2016-07-22T05:13:31.237 回答
1

谷歌顶部的一些“网络安全字体”链接：

https://www.cssfontstack.com/

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

于 2018-01-16T18:57:36.677 回答
0

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

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

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

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

只需在您的堆栈中使用通用 CSS 字体系列，避免任何 helvetica 衍生产品，不要使用依赖于特定字体指标的设计，您会没事的。

于 2016-07-31T08:51:42.210 回答