CSS@font-face-什么是“ src: local (’)”？

我第一次使用 @font-face，并且从 fontsqurel 下载了一个 font-kit

他们建议插入到我的 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？

91663 次浏览
小开
最佳答案

如果你读了 font-Squirrel 的 font-face 生成器里的注释，你就会发现这是 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 + 字体管理软件可以 搞乱当地的推荐信，比如 把象形文字变成 A 块

  • 在 OS X 上，字体管理软件可以 更改系统设置以显示 在尝试访问 可访问的 local ()字体 图书馆/字体外。更多细节 在我的防弹柱上。 X 字体探险家 也会把别的事情搞砸 火狐浏览器

  • 虽然不太可能，但你可以 引用本地()字体，该字体为 完全不同于你 我想是的 字体不同，名称相同) 至少这是个风险 将类型的控制权交给两者 浏览器和主机 风险可能不值得 避免下载字体。

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

小开

这个 local 是一个 css 黑客，用来转移 IE6-8无法下载的字体(它只能使用 EOT 格式的字体)。

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

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


提交答案