Question

我尝试使用图标字体，到目前为止它在Firefox以外的所有浏览器中运行良好，我不明白为什么，而不是图标只显示data-icon属性中的值任何人都可以解释为什么它不能在firefox（最新）工作？

@font-face {
  font-family: 'icon-font';
  src: url('//bit.ly/ZxomPz') format('woff'),
       url('//bit.ly/WPGMJF') format('truetype'),
       url('//bit.ly/16eqBwn') format('eot'),
       url('//bit.ly/16eqLDZ') format('svg');
}

[data-icon]::before {
font-family: 'icon-font';
font-weight: 400 !important;
content: attr(data-icon);
text-transform: none;
margin-right: 3px;
position: relative;
top: 8px;
right: 5px;
font-size: 31px;
line-height: 0;
}

<span data-icon="1" aria-hidden="true"></span>

Answer 1

这是推荐的@ font-face声明。也许你可以尝试用这个例子重写你的。

@font-face {
    font-family: 'Lobster13Regular';
    src: url('/skins/default/media/fonts/lobster/Lobster_1.3-webfont.eot');
    src: url('/skins/default/media/fonts/lobster/Lobster_1.3-webfont.eot?#iefix') format('embedded-opentype'),
    url('/skins/default/media/fonts/lobster/Lobster_1.3-webfont.woff') format('woff'),
    url('/skins/default/media/fonts/lobster/Lobster_1.3-webfont.ttf') format('truetype'),
    url('/skins/default/media/fonts/lobster/Lobster_1.3-webfont.svg#Lobster13Regular') format('svg');
}

此外，让你的服务器提供正确的'Mime-type'（ttf | otf | eot | woff）并允许外部资源的访问（Access-Control-Allow-Origin“*”）

Answer 2

我知道我迟到了，但这里有一个对我有用的解决方案，我在答案中没有看到它（除了简短的提及@Milky方式模式）。

使用以下信息创建.htaccess文件，并将其保存在字体所在的同一文件夹中：

<FilesMatch ".(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

此处提供更多信息：

Firefox是因为Firefox不允许跨域字体：http://red-team-design.com/firefox-doesnt-allow-cross-domain-fonts-by-default/
http://alittlecode.com/font-awesome-icons-not-working-in-firefox-probable-cause-and-a-fix/

图标字体在Firefox中不起作用

2 个答案: