html - 图标字体在 Firefox 中不起作用

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 类型”(ttf|otf|eot|woff) 并允许访问外部资源 (Access-Control-Allow-Origin "*")