Internet Explorer 中不显示自定义字体

Posted 2023-03-15

【中文标题】Internet Explorer 中不显示自定义字体

【英文标题】：Custom fonts not displayed in Internet Explorer

【发布时间】：2017-12-01 03:09:33

【问题描述】：

我的网站使用自定义字体。它们适用于所有浏览器，除了 Internet Explorer（版本 11.0.9600）。

CSS 代码：

@font-face 
font-family: 'almoni-dl';
font-weight: 700; /*(bold)*/
font-style: normal;
src: url('https://assets.mywebsite.com/fonts/almoni-dl-aaa-700.eot?#iefix') format('embedded-opentype'), 
    url('https://assets.mywebsite.com/fonts/almoni-dl-aaa-700.woff') format('woff'), 
    url('https://assets.mywebsite.com/fonts/almoni-dl-aaa-700.ttf') format('truetype');


html 
    font-family: 'almoni-dl','Trebuchet MS',Helvetica,sans-serif;

到目前为止我已经尝试过：

字体使用子域的绝对路径。这些字体的响应包括标题Access-Control-Allow-Origin:*。我也尝试过使用相对路径，但没有成功。 字体本身已正确下载，返回代码 200。 多次清除缓存。 字体的 Content-Type 为： woff = application/font-woff; ttf = 应用程序/八位字节流； eot = application/vnd.ms-fontobject。 其他网站（例如 www.newyorker.com）在同一浏览器上正确显示自定义字体。

我还尝试了以下语法：

@font-face 
font-family: 'almoni-dl';
font-weight: 700; /*(bold)*/
font-style: normal;
src: url('https://assets.kalir.co.il/fonts/almoni-dl-aaa-700.eot');
src: url('https://assets.kalir.co.il/fonts/almoni-dl-aaa-700.eot?#iefix') format('embedded-opentype'), 
    url('https://assets.kalir.co.il/fonts/almoni-dl-aaa-700.woff') format('woff'), 
    url('https://assets.kalir.co.il/fonts/almoni-dl-aaa-700.ttf') format('truetype');

还有什么问题？

【问题讨论】：

什么版本的IE？

版本 11.0.9600

如果在src 之后移动font-weight 和font-style 会发生什么？可能是 IE 首先期望源，然后绊倒了。

font-family 和 src 是唯一需要的位，根据规范，如果缺少任何一个，字体规则将被忽略。通过在其间插入其他内容，您可能会无意中导致 IE 忽略该规则。

这是个好主意，但我刚刚尝试过......它没有用。

【参考方案1】：

在 css 中的 font-family 属性中，尝试输入字体的实际全名，如果不起作用，请尝试使用完整的文件名（减去扩展名）作为 font-family。 如果字体系列名称与预期的不同，IE 就知道在查找字体时会出现问题！