2012-11-29 49 views
10

大家好我正嘗試在Css中使用像photoshop這樣的清晰屬性,但我該怎麼辦?如何在CSS中製作字體清晰?

這裏是我的CSS

#login_text 
{ 
position:absolute; 
top:10px; 
left:18px; 
font-size:13pt; 
font-weight:bold; 
font-family:Arial; 

} 
+0

?你爲什麼要磨銳字體? – Joey

回答

12

除了AMK提到的CSS3 text-rendering屬性,還有一個的Webkit(瀏覽器)的抗鋸齒特定黑客:-webkit-font-smoothing: antialiased;(我相信默認值是subpixel-antialiased),這是好的,因爲WebKit的web字體渲染使用可以小於在Windows機器上尤其理想。 A bit more info can be found here

還有一個老建議font-smooth CSS3屬性(see here),但據我所知它沒有實現,並沒有做任何事情(至少不是我所能看到的)。

可悲的現實是,你不會得到在網絡上的Photoshop品質的字體渲染,尤其是不能在Windows機器上。您可以通過選擇好的網頁字體和選擇自然可以很好地縮放的字體大小來彌補這一點,但只有這麼多才能做到。

+2

我認爲'-webkit-font-smoothing'不相關,因爲它在Windows平臺上不受支持。 –

+0

^微軟網絡瀏覽器 –

2

雖然沒有「犀利」的價值,我認爲CSS3 text-rendering屬性是最好的一段路要走。對於較小的字體大小,效果最爲明顯,對大字體沒有太大影響。

請注意,這種支持非常有限,但據我所知,這是唯一可用的方法。

您的其他選項(如果您使用的是自定義字體)只需獲取更高質量的矢量。

+0

「文本渲染」對清晰度有什麼影響?它影響渲染的其他方面。 –

+0

由於文本渲染會影響清晰度,即使它沒有在任何地方聲明,它的確如此。 –

+0

@AMK,你能提供一個例子嗎?您將使用哪個值作爲屬性,以及哪個瀏覽器對清晰度有影響? –

5

Firefox 25添加了一個新的僅限Mac-OS的非標準屬性-moz-osx-font-smoothing等價於WebKit的-webkit-font-smoothing。

元素{

-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: grayscale; 

}

0

看到這個example.Henrique禿子解釋什麼是您使用的自定義字體什麼的可能途徑尖銳https://www.linkedin.com/grp/post/2071438-268918276

+2

雖然此鏈接可以回答這個問題,最好是在這裏有答案的主要部件,並提供鏈接以供參考。如果鏈接頁面更改,則僅鏈接答案可能會失效。 – PKirby

+0

還是無法訪問...這是一個羣體職位。你必須加入才能看到答案。請解釋答案。 :) – Julix