font-familyの指定順序が悩ましい…。iOSとMacとWindowsのフォント設定の考察。

ブログの改造あれこれ
PR

20130113-160752.jpg

なんだかんだと最近フォントの事が気になって気になって夜も眠れない日々を送っていおります…。どうもこんにちは。(・_・;

えっと…。

このサイトを訪れてくださる方は、今は半数以上が iOS からです。
次いで Windows。
三番目が Mac から。

先日、Webフォントのことを書いたのですが…

Webフォントが楽しい!Webフォントの探し方と使い方・設置の仕方などなど。 | norirow’s Diary

せめて、iOS で『ヒラギノ丸ゴシック』が表示できるようになったら嬉しいんですが…。 ということで仕方なく 必要に迫られて Webフォント を勉強することにしました。 …

Webフォントを使う理由もそうだけど、フォントをあえて選ぶ理由は、もちろん “自己満足” もあるのだけれど、どちらかといと、せっかく訪れてくれた方が “読みやすい” デザインにしておきたいから。

前述したように、今や iOS からのアクセスが一番多いことを考えると、iPhone や iPad から見にきてくれた人が一番見やすいように、一番心地いいように しておくべきな気がしています。

ただ、上記の Webフォントの記事でも書いたのだけれど、現状、iOSで表示できる日本語フォントって、『ヒラギノ角ゴ』しかないわけです。…たぶん。中華風な『Heiti SC』もあるのはあるのだけれど…(・_・;

個人的には『ヒラギノ丸ゴ』が iOS で表現できるようになったら嬉しいのですが…。

訪れてくれた人が読みやすいように。心地良いように。

これ難しい問題なんですが…。

『読みやすい』とか『心地良い』というのは、フォント単体の要因だけではなくて、そのサイトのデザインや、記事の雰囲気と フォントとのバランスが重要な気がしています。

なんとなくなんですが、ウチのサイトの場合は、iPhoneで見た時に、レスポンシブデザインにしてるせいもあって、通常の ヒラギノ角ゴ が読みにくいような気がしていました。

あとは、記事の雰囲気的にも。

だから、Mac では ヒラギノ丸ゴ にしていたのだけれど、iOS でもなんかいい表現方法はないかと思って、Webフォントを試してみた… というのが前回までのあらすじです。:゚(;´∩`;)゚:。

font-family の指定の順番が悩ましい

ただ、仮に自分が納得いくフォントが見つかったとしても、次に問題になってくるのは、OSごとの表現のされ方の違い。

iOS で表現できるお気に入りのフォントが見つかったとしても、それを Windows で見たらギザギザ文字になってしまったり…。:゚(;´∩`;)゚:。

だから、今、ウチのサイトで指定している font-family の順序はこんな感じ。

font-family: ‘Georgia’, ‘Hiragino Maru Gothic Pro’, ‘ヒラギノ丸ゴ Pro’, ‘Meiryo’, ‘メイリオ’, ‘MS PGothic’, ‘MS Pゴシック’, ‘Webフォント’, sans-serif;

多いのぉ…( ꒪⌓꒪)

せっかくの Webフォントも完全に iOS専用です。一番最後…。

上記のようなフォント配列になった理由…

  1. 選んだ Webフォントが、iOS と Mac では綺麗に表現されるんですが、Windows ではギザギザ文字に。
  2. だから、Windows用に “MS P ゴシック” を前に持ってくると、今度は Office系を入れてる Mac でも “MS P ゴシック” が表示されてしまって変な感じに。:゚(;´∩`;)゚:。
  3. なので、さらに前に “ヒラギノ丸ゴ” を配置。
  4. Windows Vista や Windows7 用に一応 “メイリオ”“MS Pゴシック” の前に…
  5. ブラウザのバージョンに配慮して、それぞれ 日本語と英字表記で…
  6. アルファベットの表記は “Georgia” がバランスが良いような気がしているので先頭に…

あと… OS だけでなく、Safari だとか Chrome だとか Internet Explorer だとか Firefox だとかブラウザの種類も考えなきゃならない…。

…うーん、悩ましい。:゚(;´∩`;)゚:。

これでいいのかどうかはわからないけど、今はこれに落ち着いております。

考えれば考えるほど悩ましいね…(,,-_-)

と、いうことで、おかしかったら教えてください。

それではまた。

あ… Androidは…どうなってるんだ。・゜・(ノД`)・゜・。

タイトルとURLをコピーしました