CSS字体fallbackfont

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;