@font-face 不适用于特定版本的 Internet Explorer 11 [英] @font-face not working with specific version of Internet Explorer 11

查看：31 发布时间：2021/12/18 12:36:34 html css internet-explorer font-face

本文介绍了@font-face 不适用于特定版本的 Internet Explorer 11的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我知道有很多类似的问题，但这种情况似乎很奇怪.@font-face 对于 Internet Explorer 11 (Windows 7 Pro) 似乎已损坏.具体来说，版本:11.0.9600.17728，更新版本:11.0.18.

@font-face 在 Chrome、Firefox、Safari、Opera(适用于 Linux 和 Windows)上对我来说工作正常.事实上，它甚至适用于 Internet Explorer 版本:11.0.9600.17633，更新版本:11.0.16，也在我拥有的另一台机器上运行 Windows 7.>

开发者控制台中没有任何内容表明获取字体有任何问题.我已经将我的 html/css 简化为一些非常基本的东西来重现问题.在下面的情况下，两种自定义字体都不起作用(对于该特定 IE 版本):

<头><link rel="stylesheet" type="text/css" href="test.css"/><身体><p>这个字体应该是 Roboto Thin</p><p>下面应该有图标.如果不是，则 font-face 不起作用.</p><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span>

...和 CSS:

@charset "UTF-8";@字体脸{字体系列:'robotothin'；src: url('roboto-thin-webfont.eot');src: url('roboto-thin-webfont.eot?#iefix') 格式('embedded-opentype'),url('roboto-thin-webfont.woff') 格式('woff'),url('roboto-thin-webfont.ttf') 格式('truetype'),url('roboto-thin-webfont.svg#robotothin') 格式('svg');字体粗细:正常；字体样式:正常；}@字体脸{字体系列:'typicons';src: url('typicons-regular-webfont.ttf');}p{字体系列:robotothin；字体大小:26px；颜色:#666；}跨度 {字体系列:typicons；字体大小:30px；颜色:#0062A8；}

您可以找到

I know there are lots of similar questions but this situation seems really odd. @font-face seems to be broken for Internet Explorer 11 (Windows 7 Pro). Specifically, Version: 11.0.9600.17728, Update Version: 11.0.18.

@font-face is working fine for me on Chrome, Firefox, Safari, Opera (both Linux and Windows, where applicable). In fact, it's even working on Internet Explorer Version: 11.0.9600.17633, Update Version: 11.0.16, also running on Windows 7 on a different machine I have.

There is nothing in the developer console to indicate that there is any problem fetching the fonts. I've simplified my html/css down to some very basic stuff to reproduce the problem. In the case below, neither of the custom fonts are working (for that specific IE version):

<html>
<head>
    <link rel="stylesheet" type="text/css" href="test.css" />
</head>   
<body>      
    <p>This font should be Roboto Thin</p>
    <p>There should be icons below. If not, then font-face is not working.</p>
    <span>a</span>
    <span>b</span>
    <span>c</span>
    <span>d</span>
    <span>e</span>
    <span>f</span>
    <span>g</span>
    <span>h</span>
    <span>i</span>
    <span>j</span>
    <span>k</span>
    <span>l</span>
    <span>m</span>   
</body>
</html>

...and the CSS:

@charset "UTF-8";

@font-face {
    font-family: 'robotothin';
    src: url('roboto-thin-webfont.eot');
    src: url('roboto-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('roboto-thin-webfont.woff') format('woff'),
         url('roboto-thin-webfont.ttf') format('truetype'),
         url('roboto-thin-webfont.svg#robotothin') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face { 
    font-family: 'typicons'; 
    src: url('typicons-regular-webfont.ttf'); 
}

p {
    font-family: robotothin;
    font-size: 26px;
    color: #666;
}

span {
    font-family: typicons;
    font-size: 30px;
    color: #0062A8;
}

You can find that code running here.
If I view that page using the version of IE causing problems, the text font will be the default and instead of icons you'll only see the letters in the span tags.

Given that @font-face is working in every other browser I've tested (even different version of IE 11) is this likely to be a bug with that version of IE, and is there anything I can do to fix or debug further?

解决方案

This could be related to an issue with the Security Settings as described in this bug report.

In Internet Options go to:

The Security Tab
Security level for this zone
Custom level
Downloads
Font Download

If it's Disabled then you need to Enable it.

这篇关于@font-face 不适用于特定版本的 Internet Explorer 11的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

@font-face 不适用于特定版本的 Internet Explorer 11 [英] @font-face not working with specific version of Internet Explorer 11

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

@font-face 不适用于特定版本的 Internet Explorer 11 [英] @font-face not working with specific version of Internet Explorer 11

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭