什么是跨浏览器,跨平台的Web安全字体?

时间:2010-01-25 07:22:23

标签: css fonts mobile-website

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

7 个答案:

答案 0 :(得分:13)

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

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

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

答案 1 :(得分:12)

最佳解决方案是在任何特定字体后始终提供generic font family

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

答案 2 :(得分:4)

也许这个链接可以为您提供更多想法:

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

使用上面的字体系列从来没有给我带来任何问题。

答案 3 :(得分:2)

答案 4 :(得分: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

答案 5 :(得分:0)

忘掉跨浏览器的跨平台字体堆栈,网络示例通常只关心基本拉丁语的Windows和OSX,它们在国际语言和Linux上失败,以及新的外形。

由于许可的原因,Linux从未使用过与Windows和OSX相同的字体,而且字体设计工具已经变得足够成熟,你现在发现了很多不同的东西(并不是说创建大型编码字体很容易,但很多用户只关心关于涵盖其特定语言的字体。)

字体创建已经变得足够便宜大公司(包括移动制造商)现在喜欢通过为大版本(新设备或主要操作系统版本)调试新字体来区分。

当字体调查仍然流行时,DejaVu字体系列在Linux上有很多用途,可能情况不再如此。 DejaVu和Arial有不同的指标。

只需在堆栈中使用通用CSS字体系列,避免使用任何helvetica衍生产品,不要使用依赖于特定字体指标的设计,否则您就可以了。

答案 6 :(得分:0)

Google顶部的一些“网页安全字体”链接:

https://www.cssfontstack.com/

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