0

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

Courier 在不同浏览器中的渲染方式 创建此图像后，我更加困惑。我在 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”？

您可以在此处找到实时示例。

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

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

4

2 回答 2

2

CSS 缺乏编程功能，因此您无法在 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-08T11:10:31.543 回答
1

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

于 2012-08-08T11:24:50.850 回答