首先我应该提到我正在开发 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 具有可嵌入权限。我什至尝试摆脱我的文档类型。我阅读了防弹语法并尝试了这些示例。当我在 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');
}