CSS @font-face - “src：local（'☺'）”是什么意思？

Question

我第一次使用@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 之外的所有内容有什么害处吗？

Answer 1

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/

Answer 2

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

Answer 3

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

这是他blog post的摘录：

---

还有..关于@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+字体管理软件可以 搞乱本地参考，比如 将字形变成 A 块。

• 在 OS X 上，字体管理软件可能 更改系统设置以显示 尝试访问时的对话框 可访问的 local() 字体 在图书馆/字体之外。更多详情 在我的防弹帖子上。 字体资源管理器 X 是 也知道会弄乱其他东西 火狐。

• 虽然不太可能，但您可以 引用一个 local() 字体，它是 和你的完全不同 认为是。 （关于打字员的帖子 不同的字体，相同的名称）在 至少这是一个风险，你是 将类型的控制权交给两者 浏览器和主机。这 风险可能不值得 避免字体下载。

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