對 Mac OSX 使用 smoothing grayscale CSS 設定

看到網頁的字型特別細緻,就很想看看是什麼字型預設可以做成這樣子。

查到的只是個 -moz-osx-font-smoothing: grayscale; 的設定,看起來還沒列入標準,而且似乎只有 MacOSX 可以看到。

對 Mac OSX 使用 smoothing grayscale CSS 設定

先在自己 Blog 加入看看,看起來雖然字體變細,顏色變淺一點,但是整體看來不會比較吃力,就先繼續用用看。

CSS 設定如下:(二選一即可)

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; /* Default: auto */
}

html * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

依照此篇「Better font-rendering on OSX」設定的做法:(沒測試過,不曉得效果如何)

  • 白底黑字用:
    • -webkit-font-smoothing: antialiased;
    • -moz-osx-font-smoothing: grayscale;
  • 黑底白字用:
    • -webkit-font-smoothing: subpixel-antialiased;
    • -moz-osx-font-smoothing: auto;

相關網頁

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料