adsense1

adsense4

おはようございます、
くらま天狗です( ̄▽ ̄)b

本日は、ホームページに使う游フォントに関するお話などを少々・・・。

標準搭載された游フォント

Web制作者なら、Windows8.1以降で標準搭載された游フォントに興味のある人も多いのではないでしょうか。Windows Vista以降標準フォントだったメイリオは、明瞭(メイリオの語源)の通りユニバーサルデザインに配慮された読みやすいフォントでしたが、その反面字体としての美しさにはやや欠けるフォントでもありました。

ホームページに使用できる游フォント

游ゴシック・游明朝フォントは、Windows8.1以降の全ての端末にインストールされていることが想定できるので、今後Windows7のシェアが減ってくれば、ほぼ全てのWindows端末に入っているという時代が来るでしょう。なお、Windows7でも游フォントを独自にインストールすることが可能です。

OS標準搭載の明朝体フォントは久しぶり

游ゴシックは標準的な癖の少ないゴシック体で、また游明朝はWindows標準搭載の明朝体フォントとしては、MS明朝以来久しぶりのフォントになります。MS明朝がアンチエイリアスの効かない見難いフォントでしたので、游明朝にはその分期待がかかります。

Webフォントより優れている点

現状でもスクリーンフォントとして使えるフォントには、メイリオ以外にGoogleの能登フォントや、さくらインターネット独自のモリサワフォントなどのWebフォントという物がありますが、日本語フォントは欧文フォントとは違って1書体で10メガバイト程度のファイルサイズがあり、低速回線での使用を考えると、日本語のWebフォントの使用は実用的でないと筆者は考えています。そのため、游ゴシック・游明朝の登場は私にとって待望のニュースでした。

Internet Exprolerで表示が崩れる問題

ただ、残念なことにこのフォントはバグ持ちです。正確にはインターネットエクスプローラー(略してIE)のバグとも言えるでしょう。フォントファミリーに游フォントを指定して各種ブラウザで見てみると、何という事でしょう、IEで見た時だけ文字が上に寄ってしまいます。色々調べた情報によると、IEでだけフォントのベースラインの縦位置が違うようで、これもすでにCSSハック的な方法で対応してしまったサイトが日本中に多々あることを考えると、IEの側がバグを修正してくることは考えにくいような気がします。

adsense2

Windows8.1には游フォントのMedium体がない問題

Windows8.1の環境でCSSのコーディングをしていて気付くことなんですが、ボールド体(bold)はまともなんだけど、ノーマル体(normal)の文字が細過ぎる。これも解析した先人様がいらっしゃるので知ることができましたが、Windows8.1の游フォントにはBoldとLightしかインストールされていなくて、normalに相当するMedium体がインストールされていないのでした。このWindows8.1でMedium体が見れない問題はサイト制作者側ではどうすることもできなくて、今のところユーザーがWindows10のパソコンから游フォントのMedium体を自分で持ってくるような対応しか出来ないようで何かと残念です。(とはいえWindowsのバージョンの問題は時間が解決すると考えていますけど。)

Windows8.1以降とWindows8以前を切り分ける必要がある

Webのデザインをする時には、Googleのアクセス解析を参考にしていますが、Windows7辺りはまだまだ現役でして(2018年末現在)、その中で游フォントをわざわざインストールしている人は少ないだろうと筆者は考えているので、CSSをコーディングする際にWindowsのバージョン8以前で見ている人と、バージョン8.1以降で見ている人の両方を想定して、そのどちらからでも崩れていないマークアップをすることを心がけております。ここがマークアップの面倒なところであり、逆にマークアップエンジニアの腕の見せ所でもあります。

font-familyのコード例

100%全ての環境でテストした訳ではないのでちょっといい加減ですが、筆者が使っている游フォントでのfont-familyの設定を載せておきます。Mac OSXでは游ゴシックよりもヒラギノ角ゴでの表示を優先しています。

游明朝

font-family :”游明朝”, YuMincho,”ヒラギノ明朝 Pr6 W6″,”Hiragino Mincho Pro”,”メイリオ”, “MS P明朝”,”MS PMincho”,Meiryo, serif;

游ゴシック

font-family: “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “Yu Gothic”, “游ゴシック”, YuGothic, “游ゴシック体”, “メイリオ”, Meiryo, Osaka, “MS Pゴシック”, “MS PGothic”, sans-serif;

さいごに

100%の後方互換性を維持することも大事ですが、時には競合サイトに対して何らかの優位性を持たせることが必要になる場面もあります。游フォントを使うなりして、他所が真似できない部分でのこだわりを見せるのもWebデザイン的にはありだと筆者は考えています。

adsense_mul

adsense3

カテゴリー:Category

ツイッター

京都三条会商店街北 薬膳&カフェ 雅(みやび) サイト制作・運営 一般社団法人シシン

コンテンツ

京都の観光地特集京都のラーメン特集