kei3.jp | head -n 10 diary

某社のスタイルシートを見ていて、ちょっと気になったので、紹介します。

まずその気になったfont-familyの部分を紹介します。

font-family:Arial,'ＭＳ Ｐゴシック','MS PGothic','メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif,Helvetica;

まず、最初に思った事としては、表示スピードの為にこの様になっているのかと思いましたが、しかし、今どきのWindowsマシンでメイリオが入っていても、これだとMSゴシックが表示されてしまいます。これって具合悪い気がします。MSゴシックを外していて、メイリオしか入ってない環境って有るのでしょうか？謎です。

個人的には、MSゴシックが入ったMacを使っているので、上記の書き方では、ヒラギノが使われることはないことになって仕舞います。ちょっと残念な感じ。

上記のスタイルシートでやろうとした事を想像するに、シェアの多いモノから記述したのかな？もっとも多いと思われるMSゴシックを前にする事によってそれ以降を評価しない事になり、プログラム的には速くなりそうな気がします。ただ、最後のHelveticaは何？Helvetica,sans-serifの順番ならばまだ分かりますが、一般フォントファミリ名を先に書いている意味が分からない。

自分のfont-familyの書き方としては、シェアが低く高品位なモノから書くようにしています。先ず、WindowsよりもMacのシェアが低いので、その基本的なフォントのヒラギノを書き、次にWindowsの中で一般的なメイリオとMSゴシックですが。高品位なメイリオを先にします。逆にしてしまうとメイリオが入っていてもMSゴシックで表示されるという自体になるからです。その他、MacだとOsakaなんてフォントがありましたが、今どき一部の業界を除きOS 9を使っている人も殆ど居ないだろうと思い記述していません。

更に、フォント名の日本語表記とアルファベット表記に関しては、日本語表記はSafariが認識しないので、"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"の様に併記しています。しかし、iPhoneやiPadで見る人が多いサイトは、パフォーマンスの為に順番を入れ替えた方が良いかも知れません。そもそも、スタイルシートを分けている場合は、iOS用は、Mobile Safariでみる事が殆どなので、アルファベット表記と一般フォントファミリ名だけにして、日本語表記は無くても良いかも。

色々と書きましたが、パフォーマンスだったり、閲覧者の状況など、色々考えると表記する順番は正直悩ましいです。Windowsでもヒラギノをインストールしている人も居たり、そんな事を言っているときりがなく、もしパフォーマンスを優先して、シェアだけでMacを切り捨てるならば、これで良いんじゃない？

font-family:"ＭＳ Ｐゴシック", "MS PGothic",sans-serif

英数字がMSゴシックで表示されるのは嫌だという場合は、

font-family:Arial,"ＭＳ Ｐゴシック", "MS PGothic",sans-serif

なのかな。

仮にシェアの多いWindowsのIEだけを想定するならば、"MS PGothic"は外しても良いかも。でもココまで削るならば、究極的には、

font-family:sans-serif;

一般フォントファミリ名だけの方が、メイリオがデフォルトになっていたら、メイリオが表示されて良いかも。

しかし、これだと元も子もないので、最初の奴を書き換えた例を最後に書きます。

font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Arial,'ＭＳ Ｐゴシック','MS PGothic',Helvetica,sans-serif;

こんな感じかな。Helveticaの位置は前でも良い気がするけど、これでより多くの環境で綺麗に見えると思う。