CSS字体回退字体

Question

当我使用fontface时，浏览器需要一段时间才能下载并呈现字体，直到显示浏览器的默认字体。我曾尝试将Arial作为回退字体和常规HTML/正文字体，但这并没有改变问题。

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

@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

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

通过阅读上面的评论，你可能已经尽了最大的努力。StrukturProBold只是一种简单的无衬线字体。

你可以扩展你的次要字体列表，也许Arial和Helvetica不像Verdana或Trebuchet那样好用

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

Answer 2

这被称为“无样式文本的Flash”(或FOUT)。您不会在Webkit浏览器中看到它，因为在加载字体之前，它们会隐藏文本。如果你想更积极地迫使其他浏览器隐藏FOUT，你可以用一些预先编写的JavaScript来做到这一点。

保罗·爱尔兰在这里解释了这一切：

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; 
}