时间戳

首页 > 解决方案 > @font-face 图标未在 IE 11 中显示，所有其他浏览器都支持。使用 base64 网址

css - @font-face 图标未在 IE 11 中显示，所有其他浏览器都支持。使用 base64 网址

问题描述

我的@font-face在 IE 11 中不起作用，在所有其他浏览器中都显示正常。IE 中出现控制台错误：“@font-face 失败 opentype 嵌入权限检查。权限必须是可安装的”

我在网上搜索了一些解决方案，但对我没有任何帮助。我知道这是 IE 中的一个常见问题，但询问是否有人知道

这是base64字体的所有代码。：

CSS：

.homeicon{
display: inline-block;
float: left;
font-family: iconfont;
margin-top: 3px;
}

@font-face {
    font-family: "iconfont";
    src: url(data:font/truetype;base64,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) format('truetype');

    font-weight: 400;
    font-style: normal;
}

.homeicon{
  content: "\e902";
}

html:

<span class="homeicon"></span>

标签： cssfont-face

解决方案

我已经解决了这个问题。我已将字体图标更改为 woff 格式。现在字体图标在所有浏览器上都可见，在 IE11 上是显式的。

我所做的是，我将字体图标 .ttf 文件格式化为 base64 格式 .woff。我用过这个编码器 [ https://www.giftofspeed.com/base64-encoder/]。

sintax 看起来像这样：

@font-face{font-family:'yourfontname'; src: url(data:application/font-woff;charset=utf-8;base64,YOUR BASE64 STRING HERE) format(woff);}

这是固定代码：

src: url(data:application/font-woff;base64,d09GRgABAAAAAASEAAsAAAAABDgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIFLGNtYXAAAAFoAAAAVAAAAFQXVNKLZ2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAAAHwAAAB8Ggc9uWhlYWQAAAJAAAAANgAAADYVCTmraGhlYQAAAngAAAAkAAAAJAfCA8ZobXR4AAACnAAAABQAAAAUCgAAAGxvY2EAAAKwAAAADAAAAAwAKABSbWF4cAAAArwAAAAgAAAAIAAHABNuYW1lAAAC3AAAAYYAAAGGmUoJ+3Bvc3QAAARkAAAAIAAAACAAAwAAAAMDAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6QIDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIOkC//3//wAAAAAAIOkC//3//wAB/+MXAgADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAEAANgABAAAAEnESMVJwEVMxEhNTMVIREzBADAgMD+AIABQIABQIABYMABIKDA/gAg/sDAwAFAAAAAAAEAAAAAAAA8y2TlXw889QALBAAAAAAA2PX6pwAAAADY9fqnAAAAAAQAA2AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAABAAAAQAAAAAAAAAAAAAAAAAAAAUEAAAAAAAAAAAAAAACAAAABAAAAAAAAAAACgAUAB4APgABAAAABQARAAEAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff');

推荐阅读