如果谷歌字体不可用，如何指定Web安全用户默认字体

Question

为了设计的需要，在标题中我喜欢使用非常大的字体（约70-85像素），为了避免过分占用页面空间，我需要一种非常细的字体。 我在Google字体上找到了Poiret One字体，它被归类为草书家族。 这是一种非常细的、非常优雅的字体，但草书家族的默认字体似乎是Comic Sans，这与大标题的要求完全相反——非常笨重、粗体、丑陋。 在我的CSS文件中，我有以下内容：

h1 {
  font-family: 'Poiret One', cursive;
  font-weight: 100;
  font-size: 85px;
  color: #99ccff;
}

我想将Courier New字体添加为用户默认字体，因为它是Web安全字体中最细的字体，并添加以下属性，使字符间距与Poiret One类似，以避免Bootstrap列溢出：

font-family: "Courier New";
font-style: normal;
font-size: 4.8em;
font-weight: 400;
letter-spacing: -0.125em;
line-height: 1.5em;

我能使用什么css告诉浏览器，如果用户无法查看Poiret One字体，请使用上面给出的Courier New字体修改？

期待解决方案。谢谢！

- Wendy

---

你可能需要使用JavaScript检查字体是否成功加载，以便将替代类作为回退应用于元素。请参考：https://dev59.com/H2ct5IYBdhLWcg3wI6N6 - Hashem Qolami

Poiret One字体加载正常，除非那些未启用脚本或由于某种原因无法访问Google字体的人。然后会加载Comic Sans字体，看起来很糟糕，这就是为什么我想将默认字体更改为Courier New，并进行上述修改的原因。 - Wendy

Answer 1

使用font-family属性如下：

font-family: 'Poiret One', cursive, 'Courier New';

当浏览器找不到 Poiret One 或者手写字体时，会使用 Courier New 字体。

- Bhojendra Rauniyar

---

把'Courier New'放在cursive前面不是更好吗？OP似乎不想让cursive排在'Courier New'之前。 - marcellothearcane