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

Posted 2023-03-06

技术标签:

【中文标题】CSS @font-face - “src：local（\'☺\'）”是啥意思？【英文标题】：CSS @font-face - what does "src: local('☺')" mean?CSS @font-face - “src：local（'☺'）”是什么意思？ 【发布时间】：2011-04-11 12:43:55 【问题描述】：

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

【问题讨论】：

【参考方案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/

【讨论】：

【参考方案2】：

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

【讨论】：

【参考方案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() 字体，它是和你的完全不同认为是。（关于打字员的帖子不同的字体，相同的名称）在至少这是一个风险，你是将类型的控制权交给两者浏览器和主机。这风险可能不值得避免字体下载。

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

【讨论】：

非常感谢 ☺ 现在很清楚了 - 我刚刚在 nicewebtype.com 上找到了 this 文章，它也回答了我的所有其他问题因此，本质上，该代码的本地部分表示“此字体在本地称为 X”，我们使用笑脸来防止浏览器可能使用错误的同名字体（出于上述原因）。不错:) 您真的需要local() 声明吗？是多余的吗？没有它，浏览器不应该使用你的第一个 url() 吗？当我在 chrome 开发工具中查看我的 css 源代码时，笑脸会像这样：☺ 是这样吗？ @Simon：本地声明支持 IE6 - 8（请参阅链接的博客文章），所以除非您不关心这些浏览器，否则它是必需的。