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

Question

我有一个CSS文件,其@font-face声明通过数据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 需要Access-Control-Allow-Origin在不同域提供的嵌入式字体上使用CORS头()(在我看来,滥用 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）。