【发布时间】：2013-03-25 23:13:30
【问题描述】：
首先我应该提到我正在开发 Tumblr，所以我在服务器端的东西方面受到了一些限制。我知道这里有很多关于 @font-face 的问题，但我找不到让它在 IE9 和 10 中工作的解决方案。我使用的是 FontSquirrel 语法：
@font-face {
font-family: 'FontName';
font-weight: 400;
font-style: normal;
src: url('fontname.eot');
src: url('fontname.eot?#iefix') format('embedded-opentype'),
url('fontname.woff') format('woff'),
url('fontname.ttf') format('truetype'),
url('fontname.svg#FontName') format('svg');
}
直到我发现它在 Firefox 或 IE 9/10 中不起作用，所以我一直在转换为使用 base64 编码，基于 FontSquirrel 模板并在 base64fonts.com 上对 .woff 文件进行编码：
@font-face {
font-family: 'FontName';
font-weight: 400;
font-style: normal;
src: url('fontname.eot');
}
@font-face {
font-family: 'FontName';
font-weight: 400;
font-style: normal;
src: url(data:application/x-font-woff;charset=utf-8;base64,......) format('woff'),
url('fontname.ttf') format('truetype'),
url('fontname.svg#FontName') format('svg');
}
（代表base64字符的巨型字符串的点字符串）。这在 Chrome 和 Firefox 中效果很好，并且似乎在 IE8 中也有效，但似乎没有多少按摩可以让 IE10 呈现除丑陋的系统字体之外的任何东西。
我试过单引号，双引号，没有引号。我已确保 .ttf 具有可嵌入权限。我什至尝试摆脱我的文档类型。我阅读了bulletproof 语法并尝试了这些examples。当我在 IE10 中加载该示例页面时，除了几个之外，其他所有页面都呈现正常；但是在我的页面上使用相同的语法不起作用。
如果您想查看我的怪异代码，请访问 gist.github.com/neuraldamage/5307289（如您所见，我尝试了很多字体），相关网站位于 neurodamage.tumblr.com。有任何想法吗？谢谢！
编辑：
想知道这是否是 IE 9/10 不喜欢 Tumblr 静态文件的问题？我的代码的真实示例来自 gist.github.com/neuraldamage/5307289：
@font-face {
font-family: 'Gudea';
font-weight: 400;
font-style: normal;
src: url('http://static.tumblr.com/6u5yyqj/cDgmgcczj/gudea-regular-webfont.eot');
src: url('http://static.tumblr.com/6u5yyqj/cDgmgcczj/gudea-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('http://static.tumblr.com/6u5yyqj/Qkvmgcd2c/gudea-regular-webfont.woff') format('woff'),
url('http://static.tumblr.com/6u5yyqj/LIamgcd1z/gudea-regular-webfont.ttf') format('truetype'),
url('http://static.tumblr.com/6u5yyqj/K3Nmgcd0s/gudea-regular-webfont.svg#Gudea') format('svg');
}
必须截断 base64 编码以使其适合：
@font-face {
font-family: 'FunctionPro';
font-weight: 400;
font-style: normal;
src: url('http://static.tumblr.com/6u5yyqj/OXFmhmdhl/functionpro-light-webfont.eot');
}
@font-face {
font-family: 'FunctionPro';
font-weight: 400;
font-style: normal;
src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAGvkAB......FQNRtdAAA=) format('woff'),
url('http://static.tumblr.com/6u5yyqj/8SEmhmdin/functionpro-light-webfont.ttf') format('truetype'),
url('http://static.tumblr.com/6u5yyqj/vIVmhmdi7/functionpro-light-webfont.svg#FunctionPro') format('svg');
}
【问题讨论】：
-
我总是使用 FontSquirrel 的 Webfont 生成器 (fontsquirrel.com/tools/webfont-generator) 来生成 @font-face。
-
唉，这就是我一直在使用的（只是一个清理过的版本，去掉了多余的空格等），但它在 9/10 中不起作用。
-
你受限于@font-face 吗？我在我的 Tumblr 中使用 Google Webfonts（字体是 Lato，使用了
<link>）并且效果很好。我还在我的投资组合网站中使用了 FontSquirrel，它在 IE10 中也可以正常工作。 -
这可能是特定于字体的，所以请指定出现问题的真实字体和字体的来源，最好是最小演示的URL。
-
我网站上的所有字体都会发生这种情况，无论我将它们放在前一种语法还是后一种语法中。例如：Asap、Florin Sans、Function Pro、Gudea、Nimbus Sans Novus、Thirsty Script。有些是免费的，有些是我从各种网站购买的，主要是 FontSpring。然后将文件上传到 tumblr。我将添加一个上述语法的真实示例。
标签： css fonts internet-explorer-9 font-face internet-explorer-10