4

我正在使用使用 CSS3 的 @font-face 的自定义图标字体，并且在旧版本的 Google Chrome 中，只有 unicodes 显示并且没有被替换或呈现在我的自定义字体中，它显示了这些 un​​icodes 的字形。

这是我正在使用的@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 而不是图标字体中的符号吗？

4

5 回答 5

7

你可能会遇到unicode-range限制。如此处所述，您可以在font-face声明中定义涵盖哪些 Unicode 字符。很可能较旧的 Chrome 版本默认只替换拉丁字符。您应该可以通过将其添加到您的 font-face 声明来解决此问题：

unicode-range: U+00-FFFF;

话虽如此，很可能您只是遇到了本地问题。检查您的 Chrome 设置，在Advanced Settings下，在Web Content下单击Customize Fonts，然后在底部检查Encoding的当前设置。将其值更改为“Unicode (UTF-8)”也可以解决问题。

于 2013-05-02T12:39:01.170 回答
4

尝试切换您正在加载的字体的顺序。一些浏览器，甚至是旧版本的 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;
}
于 2013-04-29T17:15:57.280 回答
3

我可能会在这里冒险，但是显示字体的文档是否有可能a）声明了UTF-8 / UTF-16以外的字符编码（或未明确声明）或b）html文档以 UTF-8 / UTF-16 以外的编码保存？

导致网站错误显示字符的一个非常常见的问题是 HTML 中声明的字符编码与用于保存 HTML 文档的编码不同。此外，使用属于这些编码之一的字符可能会产生问题。

于 2013-05-04T01:52:54.300 回答
2

您也应该发布 HTML 代码，以便我们更好地回答。我假设您data-icon在 HTML 中使用属性。在这种情况下，您应该在 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;
}
于 2013-05-05T20:27:57.470 回答
1

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

这一切都适用于较新版本的 Chrome 和其他浏览器吗？Chrome 会为大多数用户自动安装更新，因此您可能正在使网站向后兼容没人使用的版本。

于 2013-05-02T12:27:43.380 回答