Css 自定义字体为空，并在加载时显示

我们的自定义字体已加载，但在加载之前，不会显示任何文本。从Google字体加载的字体也会出现这种情况

知道为什么会发生这种情况以及如何使用回退吗

服务内容如下：

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

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

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

body, h1, h2, h3, button, input {
    font-family: 'ProximaNova', tahoma, sans-serif;
}

---

在实验过程中，我们尝试在加载页面后用JS加载自定义字体，效果相同。这是字体文件的问题还是与Chrome自定义字体的实现有关？

这是目前最可能的预期行为。（见附件。）

一些浏览器检测是否应该使用自定义字体显示文本，并在显示文本之前等待加载该字体。这会给你一个看不见的内容（也称为FOIC）的闪光。它避免了当文本以一种字体显示，然后更新为另一种字体时（有时称为未设置样式的内容闪烁，或FOUC）可能发生的布局移动。看起来Chrome目前更喜欢第一种方法

---

对于此默认行为。我不确定他们的JS解决方案与您尝试的有多大不同。他们在异步加载自定义字体声明时做的基本上是相同的事情，但他们也将字体作为数据URI直接加载到异步CSS文件中。这可能就是区别所在。

我不确定

font-family

中的字体名称是否区分大小写，但如果是，您应该在其中写上“Tahoma”