10

We are using some web fonts on our site, e.g. 

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

Due to a bug in IE8 that I have no desire to workaround in other ways, I'd like to recommend to our site authors that they not provide a fallback font when specifying web fonts. For example, instead of:

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

..do...

font-family: 'Anton';

Is there a real-world scenario where this could cause problems, i.e. why would I need to provide a fallback for a font that I am providing?

4

11 回答 11

5

谷歌字体使用@font-face 标签。当@font-face 不受支持或不可用时，后备字体可以让您的设计/布局看起来一致。

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

于 2012-08-21T16:41:29.247 回答
5

不使用后备将意味着您对以下内容充满信心：

  • 您的网站将始终加载良好的互联网连接
  • 外部字体资源将始终在您请求的位置完全可用
  • 如果您的字体未加载，则站点中受影响的文本看起来非常好，没有字体

如果你不同意其中任何一个，那么是的，你应该有一个后备字体，它被设计为后备，以防你最初的选择不可用。

于 2012-08-29T19:52:22.317 回答
4

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

于 2012-08-21T17:08:47.953 回答
3

I doubt you would have a problem with Google being unreachable. However some browsers do use the fallback font until the downloaded font is available.

From Google: https://developers.google.com/webfonts/faq

How is text displayed while the browser is still loading the font file?

Browser behavior varies depending on the type of browser. Some will only display the text after the font file is loaded, others will use the fallback font from the font stack and then refresh the page when the font is available. The latter behavior is generally referred to as the "flash of unstyled text." For browser details, see the Technical Considerations page.

For greater control over how browsers behave while the font is still loading, use the WebFont Loader.

于 2012-08-29T14:09:00.470 回答
2

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

设计相关

  • 如果它是在您的应用程序之上添加一些额外糖的设计资源，那么使用该字体而不是显示一些错误样式的元素会更便宜并且可能更好。例如大的特殊字母或背景中的标志（如：“？！＃）
  • 如果它对于非常以设计为中心的页面至关重要 - 更好的后备将是一些静态图形或从字体呈现的图形，例如通过（字体/sIFR/Cufon）

功能相关

  • 将您的特殊字体用于默认交互项（提交/按钮/链接等）
  • 使用字体为例如导航元素提供独特的图标（Iconsets via Raphael）对于处理回退至关重要，因为它会影响用户的已知和未知部分。现在您知道 IE8 问题并且不想花精力处理它们，但是所有浏览器和系统在野外 - 如果您知道您的用户群系统（内部网/公司环境）或现在无法处理扩展为了获得更大的支持（上市时间/开发成本），暂时可以离开它

内容样式

  • 这是完美的后备方案，无需额外费用，客户仍然可以阅读您的文章/标题等。在这种情况下，留下后备的可能性只是一种不好的方式。
  • 如果没有给出标准字体，打印支持可能会失败（打印问题示例）
  • 提高对比度和可读性或删除字体以使内容可读的操作系统/辅助系统使用自己的或默认字体

我肯定错过了一些应用程序 - 为了获得更好的帮助，请指定使用类型，最好是一些例子。但在所有情况下——你不能假设外部资源正在加载——所以如果你希望用户处理你的应用程序，允许他这样做，而不受网络可靠性、速度或系统限制的影响。

问候。

于 2012-08-28T20:07:40.133 回答
2

至少提供一个备用字体总是一个好主意：衬线或无衬线。如果@font-face 请求失败或加载时间过长，将显示此字体。

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

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

于 2012-08-29T18:35:50.870 回答
1

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

于 2012-08-30T18:23:43.807 回答
1

除了墨菲定律，不要相信网络上的任何东西。

我总是指出后备（<offtopic>并且在另一方面，我正在寻找一个 Firefox 扩展，它会在每个站点的基础上停用字体，更像 QuickJava 而不是 Stylish 或 Greasemonkey。position: fixed因为其他页面上没有更多蹩脚的网站。只是希望用户开始使用它，当他们厌倦了一些设计师的糟糕选择和滥用。不是全部，一些。 </offtopic>）因为它在 gzip 和缩小中花费了我 10 到 16 个字节样式表，在我的情况下不会导致其他问题。

如果它确实给你带来了问题，那么权衡利弊并做出决定。

您将有一个后备：它是默认系列的默认字体（serif）；Times 或 Times New Roman 大部分时间（我相信在某些或大多数 Linux 上除外）。

如果您的网站在 OS X、Windows 和 Ubuntu 上的衬线显示效果很好，那么您解决了其中一个问题。
如果你是：

  • 期待像素完美的渲染，即使在 XP、W7、OS X 和 Ubuntu 上使用“Cleartype”或用户未激活的 Firefox、IE 和 Chrome 如此不同的渲染，
  • 使用height而不是min-height
  • 等等

好吧，您可能会学到很难对访问者使用的系统抱有太大期望的方法。

于 2012-08-28T20:12:25.923 回答
0

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

@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');，然后链接到你自己编辑的样式而不是通过谷歌的api......但我不确定是否将 A) 正常工作，或 B) 违反某些服务条款（尽管我真的不明白为什么应该这样做）。

于 2012-08-25T17:22:45.700 回答
0

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 或任何系统的默认字体。如果您对此感到满意，那么 Google 的服务就没有问题。

如果没有，那么我建议使用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; 
}
于 2012-08-30T08:34:05.383 回答
0

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

于 2012-08-30T18:34:24.937 回答