字體在小於11px時開始變得模糊

我正在將Photoshop圖像轉換爲HTML，並且我注意到當我將字體大小設置爲11px時，它變得模糊，但在Photoshop中它看起來仍然很好。字體在小於11px時開始變得模糊

因此，在玩過之後，我發現如果將字體類型選項設置爲smooth而不是none，Photoshop也會使字體模糊不清。

那麼，如何使用CSS使字體更加銳利，從而使其反映出Photoshop的字體渲染？我使用Arial作爲我的字體。這裏是我的CSS現在：

.user_status { 
    color: #666666; 
    font: Arial; 
    font-size: 11px; 
    display: block; 
    margin-top: 10px; 
}

謝謝大家對你真棒答案，它幫了我很多，我希望我能選擇更多然後1樓的答案正確的...

2012-01-07 Linas

大多數瀏覽器都使用系統的字體渲染庫，所以大多數字體在不同的操作系統上會略有不同。但是，您可以嘗試使用下面列出的2 css3屬性：

-webkit-font-smoothing：[auto |初始| none |反鋸齒| subpixel-antialiased]

該屬性僅適用於webkit瀏覽器，如Safari和Chrome。有關詳細信息，請參閱http://maxvoltar.com/archive/-webkit-font-smoothing。

font-smooth：[auto |從來沒有|總是| <絕對尺寸> | <長度>]

這是W3C的CSS字體模塊規範的一部分。你可以在http://www.w3.org/TR/WD-font/#font-smooth-prop查看整個事情。我不確定是否有任何瀏覽器支持此屬性。因人而異。

2012-01-07 21:02:12

不幸的是，你可以做的並不多。瀏覽器沒有Photoshop提供的高級消除鋸齒設置，您可以在其中將字體平滑模式設置爲銳利，平滑或清晰（我喜歡）。你將不得不使字體變大或變小，這主要取決於瀏覽器如何呈現文本。

2012-01-07 20:38:45 webestdesigns

哦，我想也許有一些黑客 – Linas 2012-01-07 20:40:05

和瀏覽器渲染字體的不同寬度呢！目前正在研究一個相同寬度非常重要的項目並被卡住！ – webestdesigns 2012-01-07 20:45:04

不幸的是，您通常無法控制瀏覽器呈現字體的方式。一個新的CSS3屬性font-smooth可能會提供一些控制權，但不是您正在尋找的那種。

一些替代方法可能是使用JavaScript和手動或服務器端渲染的圖像來達到您所期望的效果。您可能也可以使用sIFR（腳本內嵌閃存替代）來代替一個小的Flash影片剪輯，但您可以使用它來反鋸齒字體，但Flash幾乎無處不在，它不是一個非常高效的優雅的方案。

因此，如果您絕對需要此功能，我會建議使用Photoshop製作透明PNG並使用background-image和text-indent: -9999px將圖像替換爲文本。

你可能想要考慮的另一點是，如果你真的使用11px的字體大小？這是很難看到，你可能更喜歡簡單地選擇一個更大的字體大小。

_{我可能在這個縮寫詞上是錯的。}

2012-01-07 20:48:15 Ryan

WebKit中您可以設置：

-webkit-font-smoothing: none;

這將接近你的Photoshop抗鋸齒：無。

在這裏看到一個演示：http://jsfiddle.net/jv5W8/

2012-01-07 21:02:29 Duopixel

回答