CSS：在Windows和iOS上不能一致地呈现Courier字体

Question

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

创建此图像后，我更加困惑。我在css中为我的font-family声明添加了一些更多的字体名称，以涵盖如何在不同的操作系统上调用字体（“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上，文本看起来仍然更薄。

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

Answer 1

CSS缺乏编程功能，所以你不能表达“在正常体重中使用字体A（如果可用），否则字体B以粗体显示”的内容。用CSS术语来说，字体系列和字体大小是相互独立的。

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

Answer 2

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