0

我正在尝试使用图标字体，到目前为止，它在除 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>
4

2 回答 2

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 "*")

于 2013-03-08T19:13:03.863 回答
0

我知道我迟到了，但这是一个对我有用的解决方案，我在答案中看不到它（除了@Milkyways patterns 的简短提及）。

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

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

更多信息在这里：

于 2014-05-12T20:11:19.717 回答