如何在CSS中應用字體反別名效果？

我們如何在CSS中應用類似Photoshop的字體抗鋸齒功能，如清晰，銳利，強壯，平滑？如何在CSS中應用字體反別名效果？

難道這些瀏覽器支持？

2013-07-25 Mehar

我覺得你的問題應該是「是否有可能申請的Photoshop字體樣式表中的效果？「 –

不幸的是沒有，請閱讀本：http://stackoverflow.com/questions/5811166/does-css-support-text-anti-aliasing-such-as-crisp-sharp-etc-yet –

在這裏你去爵士:-)

.myElement{ 
    -webkit-font-smoothing: antialiased; 
    }

.myElement{ 
    -webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px; 
    }

更新：（見杜克）

.myElement{ 
    text-shadow: rgba(0,0,0,.01) 0 0 1px; 
    }

來源

2013-07-26 16:13:48

'這些標記是否受到所有瀏覽器的支持？'不，這個標記僅受webkit（Chrome和Safari）支持。 – alias51

-webkit-text-shadow不再受支持，理所當然地使用text-shadow代替。 – Romainpetit

簡答：你不能。

CSS沒有影響瀏覽器的字體渲染技術;只有系統可以做到這一點。

顯然，文本清晰度可以輕鬆地與像素密集屏幕實現的，但如果您使用的是普通PC的會是很難達到的。

有一些是光滑的，而是在它的犧牲有點出現模糊（看看大多數的Adobe的字體，例如）新字體。不過，您也可以在Google Fonts找到一些流暢但模糊的設計字體。

有對字體渲染和文本效果了一些新的CSS3技術雖然一致性，性能，以及這些技術的可靠性不同，所以在很大程度上，你一般不應依靠他們太多了點。

來源

2013-07-25 17:26:46

什麼'-webkit-字體-smoothing'？ – Jasper

@Jasper只適用於'-webkit -'（這將是Safari）。 Chrome和Opera現在已經放棄了供應商前綴，如果它們不受非供應商支持（例如'font-smoothing'沒有'-webkit-'），則不支持該功能。使用字體平滑是非常不可靠的，始終不一致。 –

好奇爲什麼這是得到downvoted。如果你這樣做，請賜教。其他答案要麼不工作要麼不被所有瀏覽器支持。 –

達到最好效果。如果你想使用它網站範圍，而不必此語法添加到每個類或ID，下面的CSS添加到您的CSS的身體：

body { 
    -webkit-font-smoothing: antialiased; 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004); 
    background: url('./images/background.png'); 
    text-align: left; 
    margin: auto; 

}

來源

2014-02-03 21:06:33 user3267537

'body {text-shadow：1px 1px 1px rgba（0,0,0,0.004）！important;}'爲我工作。謝謝！更新了 – Akash

！適用於webkit和moz！ –

如何在CSS中應用字體反別名效果？

回答

相關問題