137

@font-face第一次使用并从 fontsquirrel 下载了一个字体工具包

他们建议插入我的 CSS 的代码是:

@font-face {
    font-family: 'junctionregularRegular';
    src: url('Junction-webfont.eot');
    src: local('☺'), 
        url('Junction-webfont.woff') format('woff'), 
        url('Junction-webfont.ttf') format('truetype'), 
        url('Junction-webfont.svg#webfontoNEpZXy2') format('svg');
}

现在,笑脸的事情让我难住了。但是 src 中的 url 数量也是如此 - 为什么他们推荐这么多文件,并且在呈现页面时它们都会被发送到浏览器?删除.ttf 以外的所有内容有什么害处吗?

4

3 回答 3

98

如果您阅读 font-squirrel 的字体生成器中的注释,您会发现这是 paul irish 的一个陷阱。

以下是他博客文章的摘录:


而且..关于@font-face语法

我现在推荐与原始防弹语法相比的防弹笑脸变体。

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
       url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

从防弹帖子:

是的,这是一张笑脸。OpenType 规范表明任何两字节的 unicode 字符都不能在 Mac 上的字体名称中使用,这样就降低了有人实际发布具有这种名称的字体的可能性。

笑脸是更好的解决方案有几个原因:

  • Webkit+Font Management 软件会搞乱本地引用,比如把字形变成 A 块。

  • 在 OS X 上,字体管理软件可能会更改系统设置以在尝试访问可在库/字体之外访问的 local() 字体时显示对话框。有关我的防弹帖子的更多详细信息。众所周知,Font Explorer X 会弄乱 Firefox 中的其他内容。

  • 尽管不太可能,但您可以引用与您认为的完全不同的 local() 字体。(Typophile 发布不同字体,同名)至少这是一个风险,并且您将类型的控制权交给了浏览器和主机。这种风险可能不值得避免字体下载。

这些都是非常边缘的问题,但值得考虑。

于 2010-09-13T07:01:35.337 回答
37

local(☺︎) 是一个 css hack,用于转移 IE6-8 下载它不能使用的字体(它只能使用 EOT 格式的字体)。

解释:最后一个 src 属性在 CSS 级联中优先,这意味着 CSS 将从下到上解析。local(☺︎) 将使 IE 跳过底部的 src,而不会浪费带宽下载它不能使用的字体,而是直接转到它将使用的.eot格式(在您的问题的上面一行中定义)的字体。笑脸只是为了确保不会有具有该名称(字符组合)的本地字体。

在这里阅读更多:http: //nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

于 2014-04-03T11:18:14.083 回答
-4

@font-face 最后一个 src 属性在 CSS 级联中优先,这意味着 CSS 将从下到上解析。

于 2016-02-10T11:08:23.020 回答