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

Question

我第一次使用@font-face并从fontsquirrel下载了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以外的所有内容有什么害处吗？

Answer 1

如果您阅读了font-squirrel的font-face生成器中的注释，您会发现它是保罗爱尔兰语中的一个问题。

以下是他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是   也被称为搞乱其他东西   Firefox浏览器。

  

• 虽然不太可能，但你可以   引用一个local（）字体   与你完全不同   认为是。 （Typophile帖子   不同的字体，同名）在   至少它是一种风险，你是   放弃对两者的控制   浏览器和主机。这个   风险可能不值得   避免字体下载。

  

     

这些都是非常优秀的案例问题，但值得考虑。

Answer 2

本地（☺︎）是一个css hack，用于转移IE6-8下载不能使用的字体（它只能使用EOT格式的字体）。

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

在此处阅读更多内容：http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

Answer 3

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