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上不一致呈現

回答

相關問題