CSSでfont-familyを指定してるのに、ブラウザによって見た目が違う問題。

質問

タイトルの通りですが、

font-family:"ゴシック";

と、指定しても、
firefox3.5とIE系では、フォントの見た目が変わってしまうのは、
回避できないのでしょうか？
よろしくお願いいたします。

回答No.3

dezimac · ベストアンサー

> ieで表示が変わったので、
IEはかなりいい加減な表記でも、それなりに解釈して対応してくれる非常に優れたブラウザです。
その為に誤ったHTMLやCSSでも気付かないで、それを正しいと思い込む人を増やしています。

font-family: 候補1,候補2,sans-serif;

のように表記してください。
候補1がなければ候補2、それもなければ次のを適用するようになっています。
最終的にはなければ、sans-serif等のブラウザ側で設定されているのが適用されます。
あと、sans-serifのみで指定するとIE 5.5で文字化けします。

http://mozilla.gr.jp/standards/webtips0007.html

一部のブラウザ（Safari）ですが、半角英数でのフォント名しか受け付けない場合もあるので、
次のように同じフォントをローマ字と日本語名で指定するような必要もあります。
font-family: "MS UI Gothic","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Osaka",sans-serif;

http://tangerine.sweetstyle.jp/?eid=480019

あまりこだわらない方がいいです。
どうしてもという場合は画像で。
本文全文だと、修正が面倒だしファイルサイズも肥大化するから、ロゴとか見出し程度にか使えないだろうけど。

お礼

参考URLが非常に参考になります！
フォントにこだわることができないのがhtmlの限界っぽいですね。

回答No.4

ORUKA1951

＞サンセリフのみの指定で、３０px以上大きくすると
　相対サイズなので、そこまでするならptで設定するとか・・
　なお、フォント名をつなげるときは、 , カンマでつなぎます。 ; セミコロンでCSSは終わりと解釈します。

回答No.2

yambejp

とりあえずはこんな感じ

<span style="font-family:MSGothic;sans-serif;font-size:10em;">テストtest</span>

ただしフォントの再現性なんてHTMLに求めるものではない

お礼

>ただしフォントの再現性なんてHTMLに求めるものではない

↑この一言が欲しかったですw

回答No.1

ORUKA1951

"ゴシック"んなフォントありますか？
メモ帳を起動して、書式→フォントとすると一覧がでてくる。
Windowsなら
MS UI Gothic
とか
なので、このフォント欄を反転した状態で、Ctrl+Cで正しい名前が得られるはず。
よって、
font-family: "MS UI Gothic";
しかし、クライアントらよって使えるフォントが限定されるため、かならず、
font-family: "MS UI Gothic",Osaka,sans-serif;
と、Windows用,Mac用,UNIX用(わかれば),最後に総称ファミリ名
　上記は、UNIX用は指定していない!!
のように、最後に総称ファミリ名を追加しておくべきです。

それでも、訪問者側は他のフォントを使用する場合もあるので、あまりこだわらないほうが良いでしょう。

補足

なるほど。非常に勉強になります。
font-family:"ゴシック";
と、安易に指定してみると、
ieで表示が変わったので、値としては「あり」なのかなと思ってしまいました。
もう少しいろいろ試してみます。

サンセリフのみの指定で、３０px以上大きくするとfxとieで体裁の違いが気になったので。。