CSS：备用字体

Question

我的网站使用了一种比较冷门的字体，约有一半的电脑可以正确地阅读。这种字体是“Lucida Console”。 在无法阅读此字体的计算机上，将显示丑陋的 Times New Roman 字体，有没有一种方法可以在不能读取 Lucida Console 的计算机上，使用 Arial 字体代替呢？ 可以使用 CSS 实现。

- dukevin

---

你所说的“相对晦涩的字体”？它已经包含在每个Windows副本中。 - Konrad Rudolph

不确定为什么它只在某些电脑上显示（所有的Windows系统）。 - dukevin

哦，我的错误，字体名称是 "ocr a std"。 - dukevin

一个很容易犯的错误。这两个名字听起来几乎一样。:-p - Konrad Rudolph

Answer 1

你可以指定多个字体：

p {
    font-family: "Times New Roman", Times, serif;
}

浏览器会首先尝试第一个字体，如果不可用则尝试第二个，以此类推。最终会使用衬线字体族，因此浏览器会选择任意衬线字体。建议使用等宽字体族。

因此，在你的情况下，你需要像这样：

p {
    font-family: "Lucida Console", "Courier New", monospace;
}

- Jaxan

---

这里选择了Lucida Console字体，但如果不可用则会回退到Courier New？另外，能否告诉我添加monospace有什么作用？ - dukevin

@Kevin：这意味着如果之前的字体都不可用，系统会使用默认的等宽字体。但请谨慎使用此功能（即根本不要使用），因为Safari会将其用作提示以调整样式的字体大小，使其更小。而且几乎没有办法防止这种情况，除非设置固定的字体大小（这是极其糟糕的样式，并会直接传送您进入但丁的地狱）。 - Konrad Rudolph

@Rudolph，非常好的信息。另一个问题：使用font-family：“ocr a std”，“Lucida Console”，“Courier New”，monospace; 这将是3个备用字体吗？ - dukevin

@KevinDuke 是的，它将按照您指定的顺序回退。 - 6754534367

Answer 2

更多提示：

• 谷歌搜索css字体堆栈以获得针对特定字体风格的建议字体列表。 "字体堆栈"是这些字体列表的口头名称。
• 考虑跨平台。考虑添加常见于Mac、Linux、iOS、Android、Windows和其他读者可能使用的平台的字体。
• 始终在字体堆栈的末尾包含一个通用字体系列名称，以防用户没有您想要的字体：
  • 衬线体
  • 无衬线体
  • 草书体
  • 艺术字体
  • 等宽字体
• 引用由多个单词组成的字体名称，或者简单地引用所有字体名称。

- Basil Bourque

---

另一个提示：Google字体中缺少一些符号，例如方框绘制。Adobe的Source Code Pro和Mononoki是不错的解决方法。 - Jacopo

Answer 3

你可以使用 @font-face 在你的网站上为不常见的字体提供服务(如果你有合法权限的话)。它很容易实现，甚至在IE6中也可以使用 :).

点击这里阅读更多信息：http://www.miltonbayer.com/font-face/

- kapa

---

由于这个帖子可能仍然活跃（平均每天有6次浏览），我想延伸你的评论并说停止为IE6开发;) - Camathon

@cammy 除非你为中国市场工作 ;）。顺便说一下，我的回答中重要的点当然不是IE6。 - kapa