Question

我们在网站上使用了一些网络字体，例如

<link href="http://fonts.googleapis.com/css?family=Anton" 
    rel="stylesheet" type="text/css">

由于bug in IE8我不想以其他方式解决问题，我建议我们的网站作者在指定网络字体时不提供后备字体。例如，而不是：

font-family: 'Anton', "Arial Black", sans-serif;

.. DO ...

font-family: 'Anton';

是否存在可能导致问题的真实场景，即为什么我需要为我提供的字体提供后备？

Answer 1

Google字体使用@ font-face标记。当@ font-face不受支持或不可用时，假设后备字体使您的设计/布局保持一致。

参考：http://webdesignerwall.com/tutorials/css3-font-face-design-guide

Answer 2

如果Google'字体服务器'关闭，无法访问或其他方式，我认为浏览器会回退到它的默认字体。所以在这种情况下，自己定义一个后备字体可能很方便。

Answer 3

我怀疑你是否会遇到Google无法访问的问题。但是，有些浏览器会使用后备字体，直到下载的字体可用。

来自Google：https://developers.google.com/webfonts/faq

浏览器仍在加载字体时如何显示文本   文件吗

浏览器行为因浏览器类型而异。有些只会在加载字体文件后显示文本，有些则会显示   使用字体堆栈中的后备字体，然后刷新页面   当字体可用时。通常会提到后一种行为   作为“无格式文本的闪光”。有关浏览器详细信息，请参阅   技术考虑页面。

要在字体仍在加载时更好地控制浏览器的行为方式，请使用WebFont Loader。

Answer 4

不使用后备意味着您对以下内容有完全的信心：

您的网站将始终加载良好的互联网连接
外部字体资源将始终在您
如果您的字体未加载，则网站中受影响的文字看起来绝对正常，没有字体

如果你不同意这些，那么是的，你应该有一个后备字体，它被设计为 a fallback ，以防你的原始选择无法使用。

Answer 5

...取决于您的字体应用：

设计相关

如果它是一个设计资源，在你的应用程序之上添加一些额外的糖，它会更便宜，也许更好的是使用该字体离开文本而不是显示一些错误的样式元素。例如背景中的大特殊字母或标志（如：“？！＃）
如果它对于非常以设计为中心的页面至关重要 - 一个更好的回退将是一些静态图形或从字体渲染的图形，例如通过（Typeface / sIFR / Cufon）

相关功能

使用您的特殊字体作为默认交互项目（提交/按钮/链接等）
使用字体为例如提供唯一的图标（Iconsets via Raphael）导航元素绝对是处理后备的绝对因素，因为它会影响用户的已知和未知部分。现在你知道了IE8的问题，并且不想付出努力去处理它们，但是对于所有的浏览器都是如此。野外系统 - 如果你知道你的用户群系统（内部网/公司环境）或现在无法处理以获得更大的支持（上市时间/开发成本），那么暂时离开它就可以了。

内容样式

这是一个完美的后备方案，没有额外的费用，客户仍然可以阅读你的文章/标题等。在这种情况下，留下回落的可能性是一种糟糕的方式。

printing issue example

打印支持可能会失败
操作系统/辅助系统，提高对比度和可读性或删除字体，以使内容可读使用自己的或默认字体

我肯定错过了一些应用程序 - 为了更好的帮助，请指定用法类型，最好用一些例子。但在所有情况下 - 您都不能假设外部资源正在加载 - 因此，如果您希望用户处理您的应用程序，则允许他独立于网络可靠性，速度或系统限制。

问候。

Answer 6

至少提供一个后备总是一个好主意：serif或sans-serif。如果@ font-face请求失败，或者加载时间太长，将显示此字体。

此外，您可以使用Google字体加载程序对网站加载方式进行细粒度控制。

https://developers.google.com/webfonts/docs/webfont_loader

Answer 7

如果您访问该样式表链接，则会得到...

@font-face {
   font-family: 'Anton';
   font-style: normal;
   font-weight: 400;
   src: local('Anton'), 
   url(http://themes.googleusercontent.com/static/fonts/anton/v3/tilmJBBU81h1G7ZsdY3Hmw.woff) format('woff');
}

如果它显示local('Acton')，它会查找用户拥有Acton的本地副本，因此您可以编写类似local('Acton'), url('http://themes.google...), local('Arial');的内容，然后链接到您自己编辑的样式而不是通过google的api ...但我不确定这是否会A）正常工作，或者B）违反某些服务条款（虽然我不明白为什么会这样做）。

Answer 8

除了墨菲定律之外，不要在网上信任。

我总是指示回退（＆lt; offtopic＆gt; ，另一方面我正在搜索一个Firefox扩展程序，它会在每个站点的基础上停用font-face，更像是QuickJava而不是Stylish或Greasemonkey。由于网站糟糕，其他网页上不再有position: fixed。只是希望用户在厌倦了一些设计师的糟糕选择和滥用时开始使用它。不是全部，一些。＆lt; / offtopic＆gt;）因为它在一个gzip压缩和缩小的样式表中花费了10到16个字节，并且在我的情况下没有引起其他问题。

如果确实给你造成了问题，那就权衡利弊并决定。

您将有一个后备：它是默认系列的默认字体（ serif ）;时间或时间新罗马大部分时间（除了我认为的一些或大多数Linux）。

如果您的网站在OS X，Windows和Ubuntu上显示serif，那么您就解决了一个问题。
如果你是：

期待像素完美呈现，即使使用XP，W7，OS X和Ubuntu上具有“Cleartype”或未被用户激活的Firefox，IE和Chrome等不同的渲染效果，
使用height代替min-height
等

你可能会学到很难从你的访问者使用的系统中获得很多东西。

Answer 9

Google提供的“woff”格式无法在所有浏览器和设备上运行。

以下是浏览器支持的一小部分格式：

.TTF： Firefox 3.5 +，Opera 10 +，Safari 3.1 +，Chrome 4.0.249.4 +
.EOT： Internet Explorer 4 +
.WOFF： Firefox 3.6 +，Internet Explorer 9 +，Chrome 5 +
.SVG： iPad和iPhone

无法呈现'woff'格式的系统很可能使用Times New Roman或系统的默认字体。如果你对此很好，那么谷歌的服务没有任何问题。

如果没有，那么我建议使用Font Squirrel @font-face Generator（或类似的转换器）来创建所有必要的字体格式，并使用@ font-face直接从服务器加载格式。

例如

@font-face {
font-family: 'EnigmaticRegular';
src: url('../fonts/Enigma__2-webfont.eot');
src: url('../fonts/Enigma__2-webfont.eot?#iefix') format('embedded-opentype'),
     url('../fonts/Enigma__2-webfont.woff') format('woff'),
     url('../fonts/Enigma__2-webfont.ttf') format('truetype'),
     url('../fonts/Enigma__2-webfont.svg#EnigmaticRegular') format('svg');
font-weight: normal;
font-style: normal; 
}

Answer 10

您需要为非JS浏览器提供后备字体。不可否认，在桌面上这是一个不常见的问题，只有在您销售商品时才有可能相关。但是，对于需要支持各种设备的响应式设计，您需要为它们提供非JS后备。

Answer 11

是的，你仍然应该提供后备字体。拥有它们可以让您获得更大的控制权，而不会让它们让您受到客户的支配。 http://cssfontstack.com/是找到合适字体的好资源。

是否有必要为Web字体提供后备字体？

11 个答案: