我有一个关于webfonts及其加载方式的问题。 问题是，我必须使用Calibri字体。它是常规的Windows字体。
所以字体堆栈可能是这样的：
font-family: Calibri, Candara, Arial, sans-serif;
然而，有一个Calibri的webfont，但它相当昂贵。所以我的想法是建立这样的字体堆栈：
font-family: Calibri, 'Calibri', Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
所以第一个字体应该是本地字体，第二个字体应该是webfont。因此，如果找不到本地的，则会加载webfont。
该字体的价格为xxx视图。问题是，这会起作用吗？如果这样可以省去一些字体加载？
答案 0 :(得分：2)
不幸的是，这不是CSS的工作原理。为了实现webfont，您首先需要将其包含在您的网站中（通过HTML <link>，CSS @import或通过JavaScript）。
这意味着在font-family声明之前，字体已经被加载（并且可能被托管字体的公司视为视图）。
一种解决方案可能是检测浏览器是否能够默认加载Calibri字体（使用JavaScript），如果没有，则下载webfont并使用它，但这样做可以创建一个strage用户体验因此页面默认使用可以加载的字体，然后在短时间内更改为webfont（在JavaScript加载并且您的CSS已经启动之后）。
如果您愿意沿着这条路走下去，有几个主题是关于如何检测通过JavaScript加载的字体，例如Detecting which font was used in a web page