@ font-face自定义图标字体只显示unicode [英] @font-face custom icon font only showing unicodes

问题描述

我使用CSS3的@ font-face使用自定义图标字体，在旧版Chrome浏览器中，只有unicode显示，而不是替换或呈现在我的自定义字体，显示这些unicode的字形。

I'm using a custom icon-font using CSS3's @font-face and in older version of Google Chrome, only the unicodes are showing and are not being replace or rendered in my custom font, which shows the glyphs for those unicodes.

这里是我使用的@ font-face语法：

Here is the @font-face syntax that I am using:

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

任何想法为什么unicode显示，而不是符号是icon-font？

Any idea why the unicodes are showing and not the symbols that are part of the icon-font?

推荐答案

您可能会遇到 unicode范围限制。如这里所述，您可以在字体中定义-face 声明覆盖哪些Unicode字符。很可能是，旧的Chrome版本只会替换拉丁字符默认情况下。您应该能够通过将其添加到您的font-face声明中来解决这个问题：

You're possibly running into unicode-range limitations. As described here you can define in a font-face declaration which Unicode characters are covered. It could very well be that older Chrome versions only replaced Latin characters by default. You should be able to fix this by adding this to your font-face declaration:

unicode-range: U+00-FFFF;

说完之后，很可能是你只有一个本地问题。在网页内容下的高级设置下检查您的Chrome设置，点击自定义字体，然后在底部检查编码。将其值更改为Unicode（UTF-8）也可以解决问题。

Having said that, it could very well be that you're only having a local issue. Check in your Chrome settings, under Advanced Settings, under Web Content click Customize Fonts, then at the bottom check the current setting for Encoding. Changing its value to "Unicode (UTF-8)" could solve the issue as well.

这篇关于@ font-face自定义图标字体只显示unicode的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！