Question

当我使用fontface时，浏览器需要一些时间才能下载和呈现字体，直到显示浏览器默认字体。我试图将Arial作为fallbackfont和一般的HTML / BODY字体，但这不会改变问题。

有没有办法避免这种情况？

@font-face {
font-family: 'StrukturProBold';
src: url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.eot');
src: url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.eot?iefix') format('eot'),
     url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.woff') format('woff'),
     url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.ttf') format('truetype'),
     url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.svg#webfontpQgNQDw9') format('svg');
font-weight: normal;
font-style: normal;
}
body, html {
 font-family: "StrukturProBold", Arial, Helvetica, FreeSans, sans-serif, "open-serif", open-serif;
}
h1 {
 font-family: "StrukturProBold", Arial, Helvetica, FreeSans, sans-serif, "open-serif", open-serif;
}

Answer 1

这称为“未加样式文本的Flash”（或FOUT）。您不会在Webkit浏览器中看到它，因为它们会隐藏文本，直到加载字体为止。如果你想要强迫其他浏览器隐藏FOUT，那么你可以通过一些预先编写的JavaScript来做到这一点。

Paul Irish在这里解释了一切：

http://paulirish.com/2009/fighting-the-font-face-fout/

以下是您需要的代码：

<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
  custom: {
    families: ['yourfont'],
    urls : ['http://example.com/yourfontdeclaration.css']
  }
});
</script>

和一些CSS：

h2 {
  font-family: 'yourfont', helvetica, sans-serif;
}
.wf-loading h2 { 
  visibility: hidden; 
}

Answer 2

除非访问者在其系统上安装了专业字体，否则浏览器必须像下载图像文件或链接样式表或.js文件一样下载。

通过阅读上述评论，您可能已经尽力而为。 StrukturProBold只是一个简单的无衬线字体。

你可以扩展你的辅助字体选择列表，但是Arial和Helvetica可能不像Verdana或Trebuchet那样好选择

font-family: "StrukturProBold", Trebuchet, Verdana, Helvetica, Arial, sans-serif;

CSS字体后备字体

2 个答案: