自定义@font-face在Chrome中无法加载（Chrome自定义字体未渲染）

Question

自定义@font-face在Chrome中无法加载（Chrome自定义字体无法渲染）使用CSS使用自定义字体

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

.custom_font{
   font-family:'gotham-rounded-medium', arial, sans-serif;
}

只有当您调整屏幕窗口大小时，文本才会显示。

因此，请问是否有解决这个问题的方法？

- Dnyaneshwar Shedge

---

我们需要更多的代码。仅凭这些无法调试。但是，你是说文本根本没有显示吗？其他浏览器呢？ - Mr Lister

任何调整大小，还是特定大小？调整大小时可能会有媒体查询生效吗？ - Boaz

截图中“样式”部分再多一些内容会更加有用。 - Alexander Pavlov

今天我测试了谷歌字体，没有显示空白文本。它的工作很好。我认为这是字体加载问题。Gotham-rounded-medium.woff字体大小为29kb。所以让我知道如何在JavaScript中加载所有字体文件后更改字体系列。 - Dnyaneshwar Shedge

问题已解决 :) 参考链接：https://www.filamentgroup.com/lab/font-loading.html - Dnyaneshwar Shedge

Answer 1

在我的情况下，问题与不同的Angular 2模块制作的相同@font-face的多次包含有关。请参见：

https://bugs.chromium.org/p/chromium/issues/detail?id=582198#c20

- marekozw

Answer 2

看起来这个问题在Chrome 59中得到了修复，如果它是与此处列出的bug相同的话：https://bugs.chromium.org/p/chromium/issues/detail?id=602968

另外 - 只包含一次font-face声明可能是更好的做法。我们通过重构我们的CSS架构并仅包含一次font-faces来解决了这个问题。

- Jason Awbrey