@font-face自定义图标字体只显示unicode

Question

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

下面是我使用的@font-face语法:

@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而不是图标字体的一部分的符号吗?

Answer 1

您可能会遇到unicode-range限制。如本文所述，您可以在font-face声明中定义所覆盖的Unicode字符。很可能是旧版本的Chrome默认只替换拉丁字符。您应该可以通过在font-face声明中添加以下内容来解决这个问题:

unicode-range: U+00-FFFF;

话虽如此，很可能你只是遇到了一个局部问题。检查您的Chrome设置，在高级设置下，在Web内容下单击自定义字体，然后在底部检查编码的当前设置。将其值更改为"Unicode (UTF-8)"也可以解决此问题。

Answer 2

尝试切换正在加载的字体的顺序。有些浏览器，甚至是旧版本的chrome，会以奇怪/不完整的方式加载svg字体。

试题:

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

Answer 3

我可能会在这里走出来一个边缘，但是否有可能显示字体的文档要么a)声明一个字符编码以外的UTF-8/UTF-16(或没有明确声明)或b) html文档保存在编码以外的UTF-8/UTF-16?

导致网站不正确显示字符的一个非常常见的问题是在HTML中声明的字符编码与用于保存HTML文档的编码不同。此外，使用属于这两种编码中的任何一种的字符都可能产生问题。

Answer 4

你应该把HTML代码也贴出来，以便我们更好地回答。我假设你在HTML中使用data-icon属性。在这种情况下，您应该在您的font-face css代码之后添加此代码。

[data-icon]:before {
    font-family: 'glyphs';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

Answer 5

我在过去的相对路径，旧浏览器和字体声明方面遇到了一些问题:您可能想尝试使用固定路径(/someFolderInRoot/fonts/glyphs.svg)或css文件路径下的相对路径(fonts/glyphs.svg)。

在新版本的Chrome和其他浏览器中都能工作吗?Chrome为大多数用户自动安装更新，所以也许你让网站向后兼容一个没有人使用的版本。