嵌入字体声明(@font-face)中的数据URI会破坏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

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