font-smoothingで見た目を変えてみる

スタイルシートでアプリケーションのフォントの見た目を変えるのが流行りかな。今回は、`-webkit-font-smoothing` プロパティを使ってフォントスムージング具合を変更してみましょう。

-webkit-font-smoothing: none;
-webkit-font-smoothing: subpixel-antialiased; \* Standard *\
-webkit-font-smoothing: antialiased;

フォント比較の参考サイト: Test page for -webkit-font-smoothing | Christoph Zillgens

font-smooshing.png

Safari でスタイルシートを指定してウェブページの見た目を変えてみましょう。`~/Documents/user.css` を作って以下のように記述します。

html {-webkit-font-smoothing: antialiased;}

Safari 環境設定から「詳細」パネルを表示して「スタイルシート:」で先ほど作成したスタイルシートを選択します。ウェブページを表示して、プルダウンメニューで切り替えながら違いが確認できます。

Safari だけじゃなく App Store や iTunes でも使いたい場合は、

defaults write com.apple.iTunes WebKitUserStyleSheetEnabledPreferenceKey -bool true
defaults write com.apple.iTunes WebKitUserStyleSheetLocationPreferenceKey “~/Documents/user.css”

defaults write com.apple.appstore WebKitUserStyleSheetEnabledPreferenceKey -bool true
defaults write com.apple.appstore WebKitUserStyleSheetLocationPreferenceKey “~/Documents/user.css”

のように `defaults` コマンドを利用します。また、気に入らなければ

defaults write com.apple.iTunes WebKitUserStyleSheetEnabledPreferenceKey -bool false
defaults write com.apple.appstore WebKitUserStyleSheetEnabledPreferenceKey -bool false

とすれば無効になります。

コメントを残す