Palm84 某所の日記

死のうは一定、しのびクマには何しよぞ...

メイリオとブラウザのフォントのあれやこれや

Windows XP用のメイリオも出てましたね。

メイリオ

よく見てみるとこのメイリオは上付き表示になってますね。CSS で文字列に background-colorborder を付けてる場合は注意かも。表示をメイリオに合わせると他のフォントでは上側が空いてしまうんじゃないかと。

びみょーかなぁ?上がメイリオ、下がMS Pゴシックです。

  • line-height:100%

f:id:palm84:20181225171755p:plain

  • line-height:150%

f:id:palm84:20181225171800p:plain

【追記】メイリオは和文部が斜めにならない

日本語文字部分を em タグでマークアップしてる場合は注意かも。見た目は全く変わらないので。

f:id:palm84:20181225171802p:plain

boldを指定するか、フォントを変えるかしといた方がいいかな。

  • 太字・斜体
em { font-style: italic;
     font-weight: bold; }

f:id:palm84:20181225171805p:plain

  • 等幅フォント指定
em { font-style: italic;
     font-family: monospace; }

f:id:palm84:20181225171809p:plain

MS系フォントの和文の斜体は見辛いので使ってる人は少ないと思いますけど。

私のお気に入りフォント

  • Linux + VL ゴシック(VL Pゴシック)

Linux と一口に言っても私が使ってるのはVine 4.2 と Debian etch だけですが、しょぼい液晶なんかでも読みやすくて綺麗だと思ってます。

Win版Firefox + VL ゴシックでは ClearType だと font-size:1em がつぶれ気味だったり、標準にするとかすれたりで、font-colorCSS で指定しないといまいちだったりしますが、それでも他のフォントよりは個人的にマシなので常用してます。

Win + VL ゴシックではSafariがかなり綺麗かな?

最初は私もそうでしたが、MS Pゴシックに慣れてると太いフォントは変に感じるかもしれません。

ちなみに、XP版Firefox + VL Pゴシック(メイリオも入れてある)環境では、効果を【標準】にしてますので、メイリオが指定されてるページではフォントがボロボロです。IE7では効果の設定に関わらず ClearType有効になっているようですインターネットオプションの詳細設定で変更可能でした。多分IEインストール時に有効にしてる場合が多いかなと。

フォントについての私見なぞ

私見と言ったら私見なんだからね!(何)

  • MS Pゴシックの英数はなんかぃぁだ。でも読みにくいということではない。
  • 等幅では小文字の l(エル)と大文字の I(アイ)とかしっかり区別したい
  • IE6と ClearType が有効なIE7では英数の見映えがかなり違う。というかIE7ではかなり綺麗でもIE6ではかすれまくりとかある
  • Win版のVL Pゴシックなどモニタによってかなり見映えがちがうこともある
  • MS Pゴシック(MS ゴシック)は元々細いからなのか、どんな環境でも乱れることはまずない
  • 資料とか掲示板は別として、文章については font-size が0.9em以上じゃないと読む気がしなくなります。

常に自分の設定フォントで表示したい場合は、IEは【ユーザ補助】で、Firefoxでは【フォントと配色】の詳細設定から「Webページが指定したフォントを優先する」項目のチェックを外しませう。(但し、MS Pゴシック(またはモナーフォント)以外の設定ではAAが綺麗に表示されなくなりますけど。)

ページ作者側の苦悩

上記はOSデフォルトのフォントを表示させる為の設定。コメントが興味深いです。

font-family を指定しなきゃいいのにって気も激しくしますが、指定の必要がある場合のお話かな。(※案外高いレベルの話ではなく、「オレサマぺーじをカッコヨク見せたい」という俗っぽい動機だったりして...ゆうてる私もそうなのでエラソーなこと言えませんが。orz)

前提として【普通はこう】だからこれが無難、みたいな話になって来るかな。つまり【こういう人は少ない】だろうから、この辺で妥協しとこか、みたいにみたいに。でもそれらの情報はあくまで自分が知ってる世界に基づくので詳しければ詳しいほど悩む羽目となりまするー。

私はWEBデザイナーじゃないのでホントの所はわかりませんが、CSSfont-family を指定する目的は、デザインの確認のためだと思います。つまりその環境でしか確認していないからということで。

尚、UTF-8 なページでのIEのデフォルト設定についてはユーザ側で変更可能なはずです(インターネットオプション→フォント→【ラテン語基本】)。UTF-8 なページ作者はページに書いておくのも一手かなと。

CSS作ったら font-family を指定するのがフツーだ」なんて誤解も一部にはあるのかもしれません。作者側で指定するということは、ユーザ側の好みを無視することになってしまいます。また、 Sans-Serif がデフォルトとは限りませんし。もちろん目的が「デザイン」や「遊び」だったり、自分が気持ちよく見られることである場合は別の話になると思いまっす。

閲覧者側の苦労

私はXP上のIE7のデフォルトをメイリオにしてますけどMS Pゴシックで表示されるページも結構ありますねぇ。いい風にとればその環境でしか確認してないからでしょうか。案外確認を忘れてるだけかもしれません。

XP上のFirefoxではVL Pゴシックをデフォルトにしてますが、メイリオで表示されるサイトが増えてきました。これがまたぼろぼろです。Firefox + メイリオでは【 ClearType 】を有効すればいいんですけど、VL Pゴシックが汚くなるので効果の設定は【標準】にしてるからなのでした...こんなんは所謂マイノリティ?(いや、サイレント・マジョリティだ!なんちってw)

ちなみにlivedoor クリップはこんな設定になってました。

font-family: "ヒラギノ角ゴ Pro W3", meiryo, "MS Pゴシック" ,sans-serif;

Win版のOpera,Safariでは【meiryo】は認識されないらしくMS Pゴシックでの表示となってます。【メイリオ】なら認識しますけど。

なんちて、批評めいたことを書いてみたけど、わざわざ等幅を指定したりみかちゃんとか指定してるのはどこのどいつだー!(アタシダヨーw)orz。ってか、みかちゃんは好きちゃんちゃん。