Question

我有一个自定义字体，存储为img/roboto/Roboto-Medium.ttf。我使用以下命令在我的CSS样式表中初始化它：

@font-face {
  font-family: robotomedium;
  src: url("img/roboto/Roboto-Medium.ttf");
}

目前只有一个使用字体的div，它在display: none;中，直到JQuery淡入它：

<div id="test" style="font-family: robotomedium; display: none;">Some text</div>

如果需要，JQuery使用以下代码显示div：

$("#test").fadeIn();

由于用户系统上不存在该字体，因此需要从服务器下载该字体。我认为客户端会在页面加载时下载字体，但似乎要等到有可见文本。当用户看到div出现时，字体会在开始显示时被下载，并且因为这需要一些时间，所以文本在一秒左右不可见。我怎么能阻止这个？我尝试预加载字体，没有太多结果。

Answer 1

我见过它在某些网站上发生过几次，但主要发生在答：网站速度很慢，因此根据请求的时间，服务器需要花费时间来提供字体

和

B中。字体本身很重。

您可以尝试尽可能高地放置@font面部以便它可以更快地加载，并且尝试使用google CDN获取roboto字体。

从技术上讲，一旦人员计算机下载了该字体，它应该保留在缓存/内存中

另外，试试＆＃34;后退＆＃34;字体类似于roboto，所以它在roboto加载时显示。