うちは普段コーディングする時、Firefoxを表示確認用のメインブラウザとしてCoda2を使っています。

先日、htmlで何かのテストをしてる時、久しぶりにfont-familyを指定して
safari(mac)で表示確認したら、指定したfontが全く効いてませんでした。

これが長い長いfont-family探しの旅の始まりでした。。。

指定が無視されたその時の実際のcssは忘れてしまったのだけれど

こんな感じに指定してたはず。
そうしたらなぜか明朝体で表示されてました。

そこで検索。
font-familyの指定はウェイトなしのアルファベット表記のみでほぼよさそう | Culture27というページを発見

そこに書いてあった指定を試してみると、safari(mac)でもヒラギノ角ゴが指定されました。
やった!第一部完です。

第二部 / ところが、終わっていなかった

font-familyの指定は解決したつもりでいたから放置していてけど
昨日ちゃんと自分でまとめておこう、と

  • アルファベットの指定(ウエイト指定あり
  • 日本語指定(ウエイト指定なし
  • 日本語指定(ウエイト指定あり

の表示確認ができるページを作ってみた。
font-family適用確認ページ

この時はじめてwindowsのchromeにアルファベットの指定が効いてないことに気づく。
(chromeがそうゆうものなのか、自分の環境にインストールされたchromeの挙動が特別なのか判断がつかない)

上記ページではchromeが全滅だったので

  • アルファベットの指定(ウエイト指定なし

を追加したページ(font-family適用確認ページ)を作成して

次の9ブラウザで確認してみた
safari、chrome、firefox、opera(winとmac)
IE8(xp)

青背景がOKで
赤背景がNGだった指定

IE8 XP

ie-win

firefox / win

[image]firefox-win

firefox / mac

[image]firefox-mac

chrome / win

[image]chrome-win

chrome / mac

[image]chrome-mac

safari / win

[image]safari-win

safari / mac

[image]safari-mac

opera / win

[image]opera-win

opera / mac

[image]opera-mac

第二部まとめ

今回の結果を信じるとしたら

  • 日本語ウエイト 指定あり
  • アルファベット ウエイト指定なし
  • アルファベット ウエイト指定あり

が必要そうな感じ。

でも実際winにはヒラギノじゃなくてメイリオを指定するだろうから、こんな感じになるのかしら

ちなみにDreamweaverのfont-familyで出てくる指定は

結構違う。
んー自信なくすなぁ。


コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.