嵌入字体声明中的数据 URI (@font-face) 会破坏 IE << 9

Question

我有一个带有 @font-face 声明的 CSS 文件，该声明通过数据 URI 嵌入字体文件：

@font-face {
    font-family: 'Custom-Font';
    src: url('eot/font.eot');
    src: url('eot/font.eot?#iefix') format('embedded-opentype'),
        /* ugly FF same-Origin workaround... */
        url("data:application/octet-stream;base64,d09GRgABAAAAA ... ") format('woff'),
        url('ttf/font.ttf') format('truetype'),
        url('svg/font.svg#Custom-Font') format('svg');
    }

使用数据 URI 嵌入字体会导致 IE 9 不加载字体。如果我删除该行（或将其更改回引用 .woff 文件），IE 将加载该字体。

这个 CSS 会让 IE 感到困惑吗？

背景：我有一个页面从不同的域（CDN）加载嵌入字体。不幸的是，Mozilla 需要 CORS 标头 (Access-Control-Allow-Origin）来自不同域的嵌入字体（滥用 CORS 和可怕的想法我的意见）。由于我无法控制的原因（官僚主义），我无法在字体文件上发送 CORS 标头，因此我陷入了通过数据 URI 将字体文件嵌入 CSS 文件的次优情况。

Answer 1

我也有同样的问题。将嵌入字体移动到不同的声明中对我有用。

@font-face {
    /* Non-FF */
    font-family: 'Custom-Font';
    src: url('eot/font.eot');
    src: url('eot/font.eot?#iefix') format('embedded-opentype'),
        url('svg/font.svg#Custom-Font') format('svg');
}
@font-face {
    /* FF same-Origin workaround... */
    font-family: 'Custom-Font';
    src: url(data:font/truetype;charset=utf-8;base64,d09GRgABAAAAA...) format('truetype');
}

Answer 2

可能已超出最大网址长度。
请记住，旧版本的 IE 添加了 ? 和最后一个 '); 之间的所有内容（包括数据 URI）。
因此，在您的情况下，解决方案是使用另一种方法（例如 Mo' Bulletproofer）。