Verdanaとメイリオの併用（CSS）

通常メイリオを使用していますが、英数字のみVerdanaにしたくCSSを次のようにしました。

font-family: Verdana,"メイリオ";

すると意図した動作になったのですが、行間がつまってしまいました。
何故なのでしょうか？

環境はWindows７、Chrome11.0.696.65です。

No.6 回答者： dscripty 回答日時： 2011/06/17 09:45

[ANo.5] の補足への回答ね。

> とあるのですが、日本語の文字はメイリオだと思うのですが？？
> ただ、行がつまっているだけで。

うん、いまみると、確かにメイリオ。
なんで [ANo.1] のときはちがって見えたんだろう？？？

No.5 回答者： dscripty 回答日時： 2011/06/02 15:40

[ANo.3] の補足への回答

> 1stフォントがシステムにないとき、のお話は、１文字ずつの処理ということですよね？

そのとおり！

> 今回のChromeの場合は、おっしゃる「Linuxの多くのブラウザの場合」と同じ動きということなのでしょうか？

Chrome は多くの『Windows のウェブブラウザと同じ動き』だとおもうよ。

> 「テストの文章をすべて日本語、つまり英数字なしにして
> font-family: Verdana,"メイリオ";
> としましたが、やはり行間が詰まった感じです。」

そう、まさに 2ndFont が選択されない『Windows のウェブブラウザと同じ動き』そのものだね。

> すべて日本語（メイリオ）なので、Verdanaを指定していないときと同じ表示になるのではないかと思うのですが…

すべて日本語でも、OS とブラウザのフォント選択プロセスは変わらないよ。

1stFont が Verdana だから、
> （ただ、「MSゴシック」ではなく、ブラウザにデフォルトとして指定したフォントになるようです）
になると理解すればいいとおもう。

この回答への補足

ありがとうございます。

ANo.1での

＞よくみて！
＞下の「テスト」がメイリオになってないよ。

とあるのですが、日本語の文字はメイリオだと思うのですが？？
ただ、行がつまっているだけで。

（このときはChromeのデフォルトフォントにも「メイリオ」が設定してあったと思うのですがのですが、今「MS 明朝」（と「MS P明朝」）にしてみましたが、やはり同じでした。
それなので「linuxの場合」と同じじゃないかと思っています。）

補足日時：2011/06/02 17:49

No.4 回答者： naokita 回答日時： 2011/05/31 03:33

行間というより、正しくは「行の高さ」ですが、

line-height: 150%; よりも子要素を考慮し、
line-height: 1.5; のほうが良い場合が多いでしょう。

------------------------

フォントの差異ですが、
そんなに、きめ細かなプロ並みの設定が必要ですか？
（NO.2さん下部のように細かいセレクタ設定でも可能ですがソースが増えますよね）
でなければ、
メイリオの半角英数は、Verdanaベースで作られたので、
単独で見た目の差はほとんど無いですよ。（比較でわかる程度）
それならわざわざ、
半角英数の為にVerdanaを設定するよりも
font-family: "メイリオ";
Verdana抜きで良いのでは？　（文章単位で比較してみましょう！）
非メイリオ環境でもVerdana表示をさせたいって事でしょうか？・・・

但、非メイリオ環境や
メイリオ類似なら他の環境を考慮して、下記とかのような感じになるのかな？
font-family: Verdana, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka,"ＭＳ Ｐゴシック", sans-serif; line-height: 1.5;

CSS font-familyは、環境によって相互関係が非共通なので、
万人の環境で共通に表示させるのは難しいですね・・・

この回答へのお礼

ありがとうございます。
今回、ディスプレイ向けの「Verdana」を知ったので、使ってみようかと実験していました。
たしかに無理やり使う必要は無いかと感じはじめていますが、行間が変わって見えてしまう理由は理解しておきたいと思っています。

＞CSS font-familyは、環境によって相互関係が非共通なので、
万人の環境で共通に表示させるのは難しいですね・・・
ネットで調べていたのですが、みなさん苦労されているのですね(^^;

お礼日時：2011/05/31 22:16

No.3 回答者： dscripty 回答日時： 2011/05/30 10:00

「フォントの高さは、先に指定したもの（でインストールされているフォント）のが適用されてしまうという理解でよろしいのでしょうか？」

フォントの高さというより、
『font-family:1stFont,2ndFont; で指定された 1stFont がシステムに無いとき、ウェブブラウザと OS がどのように代替フォントを選択するか？』について書くね。

ここからは、仕様を確認してないから想像ね。でも多分あってる。

Windows のコントロールパネルの地域と言語設定で、日本と日本語を選択しているときに、
1stFont が Sans-serif 系の英数字フォントを選択したら、OS は先ず 1stFont の代替フォントを探して "MS PGothic が代替フォントとして選択されるよ。このときウェブブラウザには、1stFont が見つかったとしかわからないから、2ndFont は当然むしされるよ。だから、多くの Windows のウェブブラウザでは、2ndFont が選択されないんだ。

次に Linux の多くのウェブブラウザのときね。

『OS は 1stFont がないよ！』とウェブブラウザに伝えるよ。
ウェブブラウザは 「2ndFont は？」OS に聞くよ。
『2ndFont 有ったよ！」とウェブブラウザに伝えて、ウェブブラウザは 2ndFont を使うよ。

2ndFont もなかったら、ようやく次は 1stFont の代替フォント探し。


「（私の「意図した動作」というのは日本語はメイリオ、英数字はVardanaで表示、ということです）」

ここからは対処ね。

これを避けるためにつかえそうなのが、CSS3 の @font-face。
下のページを一度読んでみて！
http://www.w3.org/TR/css3-fonts/#unicode-range-d …
これは、Unicode のコード範囲で、使うフォントを指定できるんだ。でも、対応してないウェブブラウザ多いかも。


だから、あまりかっこよくないけど CSS2.1 で、
http://www.w3.org/TR/CSS21/selector.html

<style type="text/css">
body { font-family:verdana, sans-serif; }
[lang|="ja"] { font-family:Meiryo,sans-serif; }
</style>
:
:
:
<p><span lang="ja">テスト</span>("font-family: "<span lang="ja">メイリオ</span>";)</p>

『lang セレクタも使えないブラウザ』にも対応するページなら、代わりに class セレクタで！

この回答への補足

1stフォントがシステムにないとき、のお話は、１文字ずつの処理ということですよね？
1stFontがVardanaの様な英数字フォントだった場合に日本語をどのフォントで表示するか、というお話だと理解してます。

IE9でみてみて、『Windowsの場合2ndフォントは選択されない』というのは理解しました。（ただ、「MSゴシック」ではなく、ブラウザにデフォルトとして指定したフォントになるようです）

今回のChromeの場合は、おっしゃる「Linuxの多くのブラウザの場合」と同じ動きということなのでしょうか？
テストの文章をすべて日本語、つまり英数字なしにして
font-family: Verdana,"メイリオ";
としましたが、やはり行間が詰まった感じです。
すべて日本語（メイリオ）なので、Verdanaを指定していないときと同じ表示になるのではないかと思うのですが…
まだ私、理解出来ていないようです。

補足日時：2011/05/31 22:09

この回答へのお礼

対策案、ありがとうございます。

お礼日時：2011/05/31 22:09

No.2 回答者： dscripty 回答日時： 2011/05/29 18:22

まちがった！

font-height じゃなくて line-height ね！

No.1 回答者： dscripty 回答日時： 2011/05/29 18:18

「英数字のみVerdanaにしたく CSSを次のようにしました。

font-family: Verdana,"メイリオ";
すると意図した動作になったのですが、」

よくみて！
下の「テスト」がメイリオになってないよ。

「行間がつまってしまいま した。 何故なのでしょうか？ 」

メイリオのフォントの高さより、verdana のフォントの高さが低いからだけど、font-height: を指定すれば、同じ高さになると思うよ。

この回答への補足

ありがとうございます。
line-height: を150%にして、大体同じような感じになりました。

フォントの高さは、先に指定したもの（でインストールされているフォント）のが適用されてしまうという理解でよろしいのでしょうか？

それと、
＞下の「テスト」がメイリオになってないよ。

あまりフォントに明るくないのですが、メイリオではなく、Vardanaになっているのですか？？
Vardanaには日本語は入っていないと思ったのですが。
（私の「意図した動作」というのは日本語はメイリオ、英数字はVardanaで表示、ということです）

補足日時：2011/05/30 01:14