CSS .wf-inactive

Question

将以下代码添加到我的CSS工作中提供替代字体，而来自Google的webfont是不活动的吗？我所做的只是将以下链接添加到我的HTML：

<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Shrikhand" rel="stylesheet">

我已将此添加到CSS：

.wf-inactive body {

font-family: serif;
font-size: 1em;
line-height: 1.4em;
letter-spacing: 0;
word-spacing: 0.035em;
margin-top: 0.65em;
margin-bottom: 0.55em;

/* To match body, p, section, etc's active content */

}

还有它吗？

Answer 1

我建议使用专门设计的字体堆栈，这样如果一个字体失败，您的浏览器就会落入下一个字体。

font-family: 'Playfair Display', Arial, sans-serif;

这告诉您的浏览器优先考虑Playfair，如果不起作用，请切换到Arial。如果您的用户没有Arial，它将切换到他们计算机上的默认san-serif。