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

我的客户想要使用的字体是“Courier”。快递并未安装在每台电脑或智能手机上。当它不在时，它会回落到“新快递员”。 “Courier New”是比“Courier”更薄的字体，我希望页面的外观尽可能在不同的操作系统和浏览器中保持一致。所以我想：如果没有安装“Courier”，为什么不使用“Courier New Bold”？看到下面的图片：CSS：Courier字体在Windows和iOS上不一致呈现

How Courier is rendered in different browsers 创建这个图像后，我变得更加困惑。我在CSS中为我的font-family声明添加了更多的字体名称，以涵盖字体（即“Courier New Bold”）如何在不同的操作系统上调用。这是新的声明：

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

现在到了怪异的一部分：在Chrome在Windows XP中，文斯托尔呈现细如前。 Mobile Safari也一样。

我怀疑是这样的：Chrome（WinXP）和Mobile Safari都只检查我声明的第一个字体。他们认为这是“信使”。他们没有安装“信使”，因此他们服务“信使新”。他们没有考虑到我在CSS中声明的其他字体。

对不起，这篇冗长的文章。 我的问题归结为：我怎样才能让文本在所有操作系统和浏览器中一致地显示为“Courier”或“Courier New Bold”？

你可以找到the live example here。

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

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

来源

2012-08-08 bootsmaat

您是否比较了所有目标系统如何渲染每种字体？不同的系统可以呈现不同的相同字体。 – thirtydot 2012-08-08 09:16:47

尝试使用Courier New，使用'font-weight：bold'。 – thirtydot 2012-08-08 09:21:10

CSS缺乏编程功能，所以你不能表达这样的东西：“如果可用，使用正常体重的字体A，否则使用粗体重的字体B”。用CSS来说，字体家族和字体大小是相互独立的。

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

来源

2012-08-08 11:10:31

优秀的链接。我会研究这些替代方案。谢谢，Jukka！ – bootsmaat 2012-08-09 10:10:46

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

来源

2012-08-08 11:24:50 feeela

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

回答

相关问题