BETA

CSSでブラウザのフォントをキレイに

投稿日:2019-11-26
最終更新:2019-11-27

手順

今回はGoogle Chromeを使っていく。

  1. サイトにCSSを適用させる拡張機能「stylus」をインストール。
    https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=ja

  2. stylusの管理画面に行き、「新スタイルを作成」をクリックし、下記のcssを入力する。

     * {  
        -webkit-text-stroke-width: 0.4px; /*フォントの線の太さを指定*/  
     }  
     ::selection{  
         color: #fff; /*選択時の文字色を指定*/  
         background: #338fff; /*選択時の背景色を指定*/  
     }  
     input, textarea {  
         -webkit-text-stroke-width: initial; /*値を初期化*/  
         font-weight: 600 !important; /*フォントの太さを指定*/  
     }  
  3. 適当なスタイル名を入力し、「保存」をクリックすればフォントの見た目がキレイになっているはず。

コードの解説と補足

実際にフォントをキレイにしてくれるのは、この部分。

 * {  
       -webkit-text-stroke-width: 0.4px;  
    }  

px数を大きくすればフォントの線が太くなる。フォームに入力したテキストやボタンなどにも適用される。
このコードだけでフォントはキレイになるが、ドラッグ選択した時に問題が発生する。

-webkit-text-stroke-widthのみ(左)と、完成版(右)

ご覧の通り-webkit-text-stroke-widthのコードのみだと、選択した文字がとても見にくくなってしまう。
なので、下記のコードで選択時の文字色と背景色を指定している。

::selection{  
    color: #fff;  
    background: #338fff;  
}  

これでテキスト選択時の問題は解決したかに思えた。しかし、この::selectionプロパティは何故かフォームに入力したテキストでは思ったような挙動をしてくれなかった。

-webkit-text-stroke-width::selectionのみ(上)と、完成版(下)


なので、暫定的に下記のコードを追記した。

input, textarea {  
        -webkit-text-stroke-width: initial; /*値を初期化*/  
        font-weight: 600 !important; /*フォントの太さを指定*/  
    }  

値をinitailにして-webkit-text-stroke-widthを初期化し、font-weightでフォントの太さを指定させる。
-webkit-text-stroke-widthはフォントの線の太さを指定していたが、font-weightはフォントの幅を指定するプロパティなので、数値を大きくすればするほどフォントの横幅が広くなってしまうので注意が必要。
末尾に!importantと書けば、CSSの適用優先度を最優先にしてくれる。

あとがき

MacTypeというWindowsのフォントレンダリングをキレイにしてくれるソフトを使っているが、最近のChromeやFirefoxでは適用されなくなってきて、デフォルトのフォントレンダリングの汚さに我慢ができなかった。だが、これである程度はMacType適用時の見た目に近づいた。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@kazudachiの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう