読みやすいCSSテクニック

フォント１ ページ8

.

　作品をそのまま保存すると、Windowsの場合はカクカクしたフォントになってしまうことがあります。カクカクしていない方が読みやすいと思うので、その対処法としてCSSでフォントを指定できます。

　カクカクするフォントはMS ゴシックといい、Windowsに内蔵されているのでWindows以外からはわからないと思います。下に見本を用意しました。上側はWindowsのみカクカク、下は画像なのでどこから見てもカクカク。

カクカクするフォントです。

　やっぱりカクカクしていない方が読みやすいですよね。今この作品は「游ゴシック Medium」で指定しています。

*{font-family: Helvetica,Arial,游ゴシック Medium,游ゴシック体,ヒラギノ角ゴ Pro W3,HGｺﾞｼｯｸM,メイリオ,sans-serif !important;}

　これがここのフォント指定。綺麗なゴシック体で気に入っています。

　もう一つ読みやすいフォントとしては、メイリオが主流です。画像も用意したのでメイリオが内蔵されていない機器からは下の方で確認できます。

メイリオに指定しています。

*{font-family: Helvetica,Arial,メイリオ,ヒラギノ角ゴ Pro W3,sans-serif !important;}

　これがメイリオのソースコード。

　ちなみに、フォント配列の最初にある「Helvetica,Arial」は英語フォントです。日本語フォントの前に書いておくと英語のみそのフォントが適応されます。英語フォントは英語用に作られたものの方がバランスが整っていて好きです。

参考：『占ツクCSS辞典2』フォントの詳細1

　次項では明朝体の話をしたいと思います。

フォント２→←サンプル集

→ 目次へ｜作品を作る｜感想を書く
他の作品を探す