CSS：Courier 字体在 Windows 和 iOS 上的呈现不一致答案

【问题标题】：CSS: Courier font not rendered consistently on Windows and iOSCSS：Courier 字体在 Windows 和 iOS 上的呈现不一致
【发布时间】：2012-08-08 08:45:05
【问题描述】：

我的客户想要使用的字体是“Courier”。 Courier 并非安装在每台计算机或智能手机上。当它不存在时，它会退回到“Courier New”。 “Courier New”是比“Courier”更薄的字体，我希望页面的外观在不同的操作系统和浏览器中尽可能保持一致。所以我想：如果没有安装“Courier”，为什么不使用“Courier New Bold”呢？见下图：

创建此图像后，我更加困惑。我在 css 中的字体系列声明中添加了更多字体名称，以涵盖如何在不同的操作系统上调用字体（即“Courier New Bold”）。这是新的声明：

font-family: Courier, CourierNewPS-BoldMT, 'Courier New Bold', 'Courier New Fett', monospace;

现在出现了奇怪的部分：在 Windows XP 的 Chrome 上，文本被渲染得和以前一样细。 Mobile Safari 也是如此。

我怀疑的是：Chrome (WinXP) 和 Mobile Safari 都只检查我声明的第一个字体。他们看到它是“快递员”。他们没有安装“Courier”，所以他们提供“Courier New”。它们没有考虑我在 CSS 中声明的其他字体。

很抱歉这篇冗长的帖子。 我的问题归结为：如何让文本在所有操作系统和浏览器中始终显示为“Courier”或“Courier New Bold”？

你可以找到the live example here。

更新：我已经阅读了 -webkit-font-smoothing: antialiased; 并将其添加到 CSS 中，但这并不能解决问题。在 Windows 和 iOS 上，文本看起来仍然要细得多。

更新 2：This post from 2007 解释了 Courier 在 iOS 上如何显示为 Courier New 以及为什么它很糟糕。不过，我不确定更新版本的 iOS 是否仍然表现相同。

【问题讨论】：

您是否比较了所有目标系统如何呈现每种字体？不同的系统可以以不同的方式呈现相同的字体。
尝试使用 Courier New，font-weight: bold。

标签： css browser visual-web-developer monospace

【解决方案1】：

CSS 缺乏编程功能，因此您无法在 CSS 中表达诸如“如果可用，使用正常粗细的字体 A，否则使用粗体粗细的字体 B”之类的内容。在 CSS 术语中，字体系列和字体大小相互独立。

如果您已检查 Courier 不允许嵌入，请查看创建为类似于 Courier 的可用免费字体。首先，请查看 http://en.wikipedia.org/wiki/Courier_%28typeface%29#Free_alternatives 如果客户端可以接受其中一些，您可以将其与@font face 一起使用。（我想你已经向客户解释了 Courier 是最糟糕的选择，与 Comic Sans 竞争，并且 Courier 在仍然可用的计算机上的视觉大胆可能是由于它作为位图字体的实现引起的，这使得它在大尺寸或高分辨率渲染时看起来很糟糕。如果客户仍然坚持，免费的类似 Courier 的字体可能是最简单且技术上最可靠的方法。）

【讨论】：

优秀的链接。我会研究这些替代方案。谢谢，尤卡！

【解决方案2】：

获取一些免费的类似 Courier 的字体并将其嵌入为 webfont，以使其“在所有操作系统和浏览器中一致地显示”。这是确保用户看到您/您的客户在首先设计网站时想到的字体的唯一方法。

【讨论】：