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＆lt; 9不加载字体。如果我删除该行（或将其更改为引用.woff文件），IE将加载该字体。

这个CSS怎么会混淆IE？

后台：我有一个页面可以加载来自不同域（CDN）的嵌入字体。不幸的是，Mozilla requires a CORS header（Access-Control-Allow-Origin）关于嵌入式字体来自不同的域（在我看来是abuse的CORS和可怕的想法）。由于我无法控制的原因（官僚主义），我无法获取字体文件发送的CORS标题，因此我坚持通过数据URI将字体文件嵌入CSS文件的次优情况。 / p>

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

可能已超出maximum URL length 请记住，旧版本的IE会在?和最后');之间添加所有内容（包括数据URI）。
所以在你的情况下，解决方案是使用另一种方法（例如Mo'防弹装置）。

嵌入字体声明（@ font-face）中的数据URI中断IE＆lt; 9

2 个答案: