Unicode三角形U + 25BA►呈鋸齒狀？

►有沒有辦法對這個unicode三角形的邊緣應用抗鋸齒/平滑處理？Unicode三角形U + 25BA►呈鋸齒狀？

2013-12-20 Sunny

如果你使用IE瀏覽器中的過濾器，那麼這是不足爲奇的。否則，'-webkit-font-smoothing：antialiased;'將有助於在chrome/safari – Deryck

http://jsfiddle.net/rgSB2/ –

根據我的測試，它看起來像最好的辦法是使用text-shadow，根據三角形所指向的方向：

text-shadow: 1px 0px 0px rgba(0, 0, 0, .45); // To the right 
text-shadow: -1px 0px 0px rgba(0, 0, 0, .45); // To the left

每個瀏覽器似乎來處理這是怎樣原來有點不同。在Firefox中它幾乎沒有引人注目，在Safari中它看起來很棒。

我收集了所有不同的技術來試圖平滑Web字體到一個地方上的jsfiddle：http://jsfiddle.net/XdP6x/

Example of Unicode Triangle with various CSS faux-anti-aliasing techniques.

雖然我認爲的Webkit的text-stroke選項看起來比text-shadow稍微好一點，它不是可以輕鬆地將這兩種技術結合起來，以獲得比單獨的text-shadow更好的結果。

字體平滑沒有做什麼，模糊看起來很可怕。我也試過transform:rotate(360deg);沒有任何效果。

我還發現除了25BA以外various unicode triangles。並非所有設備和瀏覽器都支持25C0和25B6，我建議使用25BA和25C4。

或者嘗試使用SVG的CSS背景：http://jsfiddle.net/z6hw281a/

2014-07-08 20:10:51 user2449231

回答