Question

首先我应该提一下我正在研究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具有可嵌入的权限。我甚至试图摆脱我的doctype。我阅读bulletproof语法并尝试了这些examples。当我在IE10中加载该示例页面时，除了几个之外的所有页面都可以正常呈现;但在我的页面上使用相同的语法是行不通的。

如果你想查看我的怪异代码，请访问gist.github.com/neuraldamage/5307289（如你所见，我已经尝试了很多字体），有问题的网站是neuraldamage.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');
}

Answer 1

页面上的最终html标记显示两个DOCTYPE，只允许一个DOCTYPE，它必须在任何元素之前出现。当你有一个像这样严重的错误时，IE通常会让所有人感到困惑并且在其他解析时也会失败。

与w3c验证相同：http://validator.w3.org/check?uri=http%3A%2F%2Fneuraldamage.tumblr.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

虽然修复所有w3c错误并不是必不可少的，但是我觉得这个问题阻止了找到答案或者首先导致问题。

第1行

**<!DOCTYPE html>**

第13行

**<html xmlns="http://www.w3.org/1999/xhtml">**

如果可能，我会选择保留html5 doctype（第一个）

在IE10中无效的Bulletproof和FontSquirrel font-face方法

1 个答案: