2014-01-29 128 views
0

下面是來自四個瀏覽器的四個文本樣本。如何獲得最清晰的文字?

enter image description here

你可以看到 'E' 和 'S' 怎麼都有點在Chrome和Safari衣衫襤褸。

我怎樣才能建立抗鋸齒,或不惜一切代價,以使文本儘可能清晰的是所有的瀏覽器?

感謝

+1

我會避免在我的項目中使用'e's和''s。 :) – qualebs

回答

1

可以antialise在CSS文本鉻是這樣的:

body 
{ 
    -webkit-text-stroke: 1px transparent; 
} 

這裏是鏈接,你可以閱讀更多:https://github.com/h5bp/html5-boilerplate/issues/598

+0

謝謝,但我看不出這種風格在Chrome中有什麼不同。如果它應該觸發不同的字體引擎,就好像別的東西仍然禁用了開關,或者其他字體引擎不在那裏。下面Suchan Lee提出的兩種風格也是一樣的。 – Steve

1

Chrome和Safari瀏覽器使用WebKit的渲染。 -webkit-font-smoothing: antialiased將在基於webkit的瀏覽器中添加抗鋸齒功能,並且text-rendering: optimizeLegibility可提高所有瀏覽器的文本可讀性。

body { 
     -webkit-font-smoothing: antialiased; 
     text-rendering: optimizeLegibility 
    }