CSS @font-face - “src: local('?')”是什么意思？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3698319/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS @font-face - what does "src: local('?')" mean?
提问by stephenmurdoch
I'm using @font-facefor the first time and downloaded a font-kit from fontsquirrel
我是@font-face第一次使用并从 fontsquirrel 下载了一个字体包
The code they recommend inserting into my CSS is:
他们建议插入到我的 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');
}
Now, the smiley face thing has me stumped. But so too does the number of urls in the src - why do they recommend so many files and will they all be sent to the browser when a page is rendered? Is there any harm in removing all but the .ttf?
现在，笑脸的事情让我难住了。但是 src 中的 url 数量也是如此 - 为什么他们推荐这么多文件，并且在呈现页面时它们会全部发送到浏览器吗？删除除 .ttf 之外的所有内容是否有任何危害？
采纳答案by corroded
if you read the notes in font-squirrel's font-face generator, you'll see that it was a gotcha by paul irish.
如果您阅读 font-squirrel 的字体生成器中的注释，您会发现这是 paul irish 的一个陷阱。
Here is the excerpt from his blog post:
以下是他博客文章的摘录：
And.. regarding
@font-facesyntaxI now recommend the bulletproof smiley variation over the original bulletproof syntax.
@font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('?'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype'); }From the bulletproof post:
Yes, it's a smiley face. The OpenType spec indicates any two-byte unicode characters won't work in a font name on Mac at all, so that lessens the likelihood that someone actually released a font with such a name.
There are a few reasons why smiley is a better solution:
Webkit+Font Management software can mess up local references, like turning glyphs into A blocks.
On OS X, Font Management software may alter system settings to show a dialog when trying to access a local() font that's accessible outside of Library/Fonts. More detail on my bulletproof post. Font Explorer X is also known to mess up other stuff in Firefox.
Although it's unlikely, you could reference a local() font which is completely different than what you think it is. (Typophile post on different fonts, same name) At the very least its a risk, and you're ceding control of the type to both the browser and host machine. This risk may not be worth the benefit of avoiding the font download.
These are all pretty edge case issues, but it's worth considering.
还有..关于
@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() 字体时显示对话框。关于我的防弹帖子的更多细节。众所周知，字体资源管理器 X 会弄乱 Firefox 中的其他东西。
尽管不太可能，但您可以引用与您认为的完全不同的 local() 字体。（不同字体上的 Typophile 帖子，同名）至少这是一种风险，并且您将类型的控制权交给了浏览器和主机。这种风险可能不值得避免字体下载的好处。
这些都是非常边缘的问题，但值得考虑。
回答by Magne
The local(??) is a css hack to divert IE6-8 from downloading fonts it can't use (it can only use fonts in EOT format).
local(??) 是一个 css hack，用来转移 IE6-8 下载它不能使用的字体（它只能使用 EOT 格式的字体）。
Explained: The last src property takes precedence in the CSS cascade, meaning that the CSS will be parsed from bottom to top. The local(??) will make IE skip the src at the bottom, without wasting bandwidth downloading fonts it can't use, and rather go straight to the font in .eotformat (defined on the line above in your question) that it will use. The smiley is just to ensure there won't be a local font with that name (character combination).
解释：最后一个 src 属性在 CSS 级联中优先，这意味着 CSS 将从底部到顶部解析。本地（??）将使 IE 跳过底部的 src，而不会浪费带宽下载它无法使用的字体，而是直接转到它将使用的.eot格式（在上面的问题中定义）的字体. 笑脸只是为了确保不会有具有该名称（字符组合）的本地字体。
Read more here: http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/
在此处阅读更多信息：http: //nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/
回答by logu
@font-face The last src property takes precedence in the CSS cascade, meaning that the CSS will be parsed from bottom to top.
@font-face 最后一个 src 属性在 CSS 级联中优先，这意味着 CSS 将从底部到顶部解析。
