Question

我正在使用CSS3的@ font-face使用自定义图标字体，而在较早版本的Google Chrome中，只有unicodes显示并且没有以我的自定义字体替换或呈现，这显示了这些unicodes的字形

以下是我使用的@ 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;
}

知道为什么显示unicodes而不是icon-font的一部分符号？

Answer 1

您可能会遇到unicode-range限制。如上所述here，您可以在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下的相对路径file-path（fonts / glyphs.svg）。

这是否适用于较新版本的Chrome和其他浏览器？ Chrome会自动为大多数用户安装更新，因此您可能会使网站向后兼容任何人使用的版本。

@ font-face自定义图标字体仅显示unicodes

5 个答案: