ぱそこん遊ぶろぐ

　記事を読んでもらうためには内容が一番大切ですが、目を引く＝外見も大事です。

　先ずは、記事の見やすさにかかわる文字のフォントに目を向けてみましょう。

文字のフォントを読みやすいものに換える

　実際に表示される文字のfontは、使用している機器のOSとブラウザによって決まります。つまり、書き手側で設定したfontで読み手側も表示されるかというと、必ずしもそうでない場合があるということです。

　例えば、Windows、クロムブラウザ上で見てもらうことにしてブログの記事を書いたとします。見る側もWindowsパソコン、クロムブラウザで読むのであれば、想定と同一の表示になりますが、MacPCで見た場合には同じではなく、スマホで見た場合では違う表示となってしまいます。　

　実際の表示は、あくまでも、相手側（見る側）のシステムによって決まります。

　font指定のためのCSSプロパティです。

font-family: 値, … ;

　値には、1つあるいは複数のフォント名を指定できます。複数の場合には「,」で区切ります。

　指定したフォントが必ず使用される保証はないので、通常複数のフォントを指定します。

　指定したフォントの優先順位は、左から順となります。最も左にあるフォントから探しに行き、無い場合にはその次、そのまた次と順に探して当てはめていきます。

　フォントのリストの最後には、システムで自動的に適応される一般ファミリーと呼ばれるフォントの外見分類名称を入れます。

　serif 　　 :: 明朝体のような飾りのついた字体のフォント

　sans-serif　:: ゴシック体のような飾りのついていない字体のフォント

　monospace :: 文字の幅が全て同じ(等幅)でソースコード表示用に使われる字形

　これ以外にもありますが、一般な代替用途には向いていません。これらの名前の実フォントはなく、これらの特徴に合致するシステムで利用可能な実フォントが適用されます。

　一般ファミリー名には「”」や「’」を付けてはいけません。

　OS等に用意されている実物のフォントがフォントファミリーとなります。Mac-OSであれば、ヒラギノ角ゴシック、ヒラギノ明朝、San Franciscoなどです。

　これらを指定する場合には、必ず「”」か「’」で挟みます。

CSS

body {

font-family: "ヒラギノ角ゴシック", "ＭＳＰゴシック", sans-serif;

}

　Webページ全体にfontを適用させたい場合には、bodyに指定します。ブログ等では記事のページで指定はできませんから、CSS編集に入る必要があります。

　Mac用のfont指定、Windows用のfont指定と複数書いておきます。なお、andoroidスマホ用も指定したいところですが、機種によって搭載fontが違うため、一般ファミリーで対処させるのが無難です。