ウィンドウズとマックのフォントの違いについて

質問

現在、自分のホームページを作っているのですが、
ウィンドウズとマックのフォントの違いに悩んでいます。

ウィンドウズで作っている分には、
レイアウト的には何の問題もないのですが、
作ったホームページをマックで見ると、
マックではブラウザがsafariで、ヒノラギProとかいうフォントを
使用しているため、かなりレイアウトが崩れます。

それでも、何とか両方で見ても対応できるように、
意識して作ってきたのですが、先日、
<textarea>の幅が意図していたよりもかなり広く、
それに伴ってレイアウトが大きく崩れていることに気が付きました。

ウィンドウズではMSPゴシックを使用して作っていますが、
マックで見ると、フォントの大きさをスタイルシートで指定しているのにも
関わらず、かなり大きめに表示されてしまいます。
もともとのフォントが大きいのかもしれませんが、
本当に困っています。

何か良い方法はないものでしょうか？

ちなみに、フォントの大きさはスタイルシートで
body {
font-size:15px;
}
td{
font-size:15px;
}
と統一しています。

よろしくお願いします。

回答No.10

olda · ベストアンサー

textareaの大きさをwidthやheightで固定してみてはどうでしょう。
またline-heightで行間を固定してみるのもいいかもしれません。

<style type="text/css">
<!--

/* body・html・td・textarea・inputに対して */
body, html, td, textarea, input {
font-size : 15px;
line-height : 18px; /* 行間 */
}

/* textareaに対して */
textarea {
width : 250px; /* テキストエリアの幅 */
height : 100px; /* テキストエリアの高さ */
}
//-->
</style>

お礼

ありがとうございます。

今までtextareaはcols=""で指定していて、
widthで指定していませんでした…。

普通にテーブルと同じようにできるんですね。
やってみます。

回答No.11

Java-Java

こちらのサイトで、どのブラウザーでもフォントが同じ見え方になるよう調整したcssファイルを提供して下さっています。
参考にしてみてはいかがでしょうか。

ページの最下層「font css」からダウンロードできます。

参考URL：

http://www.tom-graphic.com/

回答No.9

pingu98

原因きり訳のため、条件を絞って検証しましょう。

まず、CSSでfont-sizeを指定する場合はそのフォントフェースの文字の高さを指定していることになります。
ですから、15pxと指定すればおそらく15pxの高さになっているはずです。（少なくともWin IE6及びWin firefox104標準モードではフォントに関わらず一致）
で、Macに入ってて適用されているのはヒラギノ角ゴ Pro W3とかだと思うのですが、これとＭＳＰ ゴシックを比べるとＭＳＰ ゴシックの方が幅がコンパクトに収まっているかと思います。
これはフォントフェースの違いによるものです。フォントを同じ高さにしても、幅は各フォントフェイス、各文字によって違うので、文字が沢山続くとその差が顕著になることもあります。
ヒラギノは割と等幅ゴシックに近いので、ＭＳＰと比べれば、字間の空白も加わりかなり差が大きくなります。
ですから、本当に15pxを超える大きさで表示されているのかどうか、というところには少し疑問です。

次、safariでテキストエリアの幅が意図していたよりも大きい件ですが、textareaにはCSSで幅指定をしているのでしょうか。CSSやHTMLの属性で何も指定されていない要素のデフォルトスタイルは各ブラウザによって様々なので、ピクセル値などで指定してから検証されるのがよいでしょう。

それと、FirefoxやNetscapeであればMac/Win共に使え、表示にそれ程違いもあまりせんので、これで検証する事も一つの手です。

あと、windowsユーザーで、Mac/safariでの表示が確認しづらいという場合は、web上で確認できるサイトがあるので参考URLに挙げておきます。

参考URL：

http://www.danvine.com/icapture/

回答No.8

2NN

＞#6 さん
申し訳ない。大変失礼しました。。

回答No.7

taseki

では、

font-size:15px;

の部分を、

font-family: sans-serif;
font-size: 11pt;

あるいは

font-family: sans-serif;
font-size: 15px;

にすると、どうでしょうか。

回答No.6

1050 円（@1050YEN）

>MSPが入っていない
MSPに固執する意味じゃなく、フォントを指定するという意味合いで書いたつもりなのですが。。。

回答No.5

taseki

私も以前に苦労したことがありますが、
まあ理想を言えば、「フォント種類に依存してはいけません」というところでしょうけど…。

> ウィンドウズではMSPゴシックを使用して作っていますが

ウィンドウズだからといってMSPゴシックで表示されるとは限りません。そもそもWebページは、見る人が「自分が見やすいフォント」で見られるよう設定できる、という考えにもとづいています。
もちろんウィンドウズを使っている人はMSPゴシックで見ている人が多いのも事実ですが、あまりそこをアテにしてしまうと、マックに対応できないなどという連鎖的な問題が次々と出てきてしまいます（たとえばウィンドウズでもマックでもない環境だってあるので）。

どうしても指定したいなら、いわゆる Generic-family（serif など）にとどめるのが無難です。

と言っても、それは程度の問題であって、見た目のイメージを重視したいのでフォントも指定したい場合は多いですが、しかしそれにしたって、フォントによってレイアウトが崩れてしまうほど、というのはいかがなものかと…。
というか、正直想像ができないです…。

それと、「font-size:15px;」という書き方ですが、一般的にはフォントサイズはポイント数（font-size:11pt; など）で指定します。
違いは物理長かどうかですが、その環境にあわせて拡大・縮小されます。pxはピクセルで完全にモニタによって固定されますが、両者の相対的な差は環境によって設定されます。
よくポイント指定で変化するのが原因で、意図しない結果になることがありますが、今回のケースでは、もしかしたら逆の結果になっているのかもしれません。
ためしにポイント指定にしたら、どうなるでしょうか。

補足

以前は11ptで指定していました。
それでも改善されなかったので、pxに変えたような気がします（？）
が状況は変わっていません。

以前、マックのIEで見ていた時には、それほどレイアウトの差は
感じなかったのですが、safariの設定に何か問題でもあるのでしょうか？

ちなみに、デフォルトの設定以外で変えたのは、フォントの部分だけです。
フォント名は変えず、明朝体のようなものをゴシック体に変えました。

回答No.4

the845t

sans-serif 　ゴシック体系
serif 　明朝体系
cursive 　 筆記体系
fantasy 　 装飾系
monospace 　 等幅系

ヒノラギってのがどのフォントに該当するのか分かりませんが、
font-family:～;
で指定するとどうでしゅか？
装飾系は普通使いませんねｗ

回答No.3

2NN

＞#1 さん
Macには「ＭＳ Ｐゴシック」が入っていないので、
有効になりませんよ。

回答No.2

2NN

WinとMacのスタイルシートを別々に分ける方法が一番無難なようです。
http://www5e.biglobe.ne.jp/~access_r/hp/javascript/js_085.html

お礼

なるほどです。
多少、内部のコーディングが複雑になっても、
やはり個々に設定するべきなのかもしれませんね。

ありがとうございます。

回答No.1

1050 円（@1050YEN）

フォントは指定してないのですか？
font-family:"ＭＳ Ｐゴシック"

これを付けてみてだめなら、表示ブラウザでの分岐を行いＭＡＣ設定を別に持つのかな？

ＨＴＭＬ素人ですので、すいません。

補足

早速のご回答、ありがとうございます。

ブラウザの件なのですが、Netscape 7.1と
Mozilla Firefoxではウィンドウズでテスト済みです。

やはり、Macのみでレイアウトが崩れる、といった状況です。