何でもありの、ごちゃまぜブログ。

欧文のフォント指定は、和文のフォント指定よりも前に書く!

2013.06.20

欧文のフォント指定は、和文のフォント指定よりも前に書く! はコメントを受け付けていません。

最近疑問に思っていたことが、今日解決しました。

「“欧文のフォント指定”と“和文のフォント指定”の両方を記述するとどうなるんだろう?」
「記述の順番で何か変わるのか?」

結論としては、
「欧文フォントと和文フォントを指定するなら、欧文フォントを先に指定する必要がある。」ということでした。

欧文のフォント指定よりも先に和文フォントの指定をすると、日本語も英語も指定した和文フォントが使用されるようです。

先に欧文のフォント指定をしておけば、欧文は指定した欧文フォントになり、対応していない日本語は、あとに記述した和文フォントで表示されるんですね。

一応、簡単なサンプルを作成した確認してみました。

サンプルコードはこちら

【css】

#sample1{
font-family:"メイリオ", Meiryo, "Arial Black", sans-serif;
}
#sample2{
font-family:"Arial Black", "メイリオ", Meiryo, sans-serif;
}

【html】

<p id="sample1">あいうえお abcdefgeijklmnopqrstuvwxyz</p>
<p id="sample2">あいうえお abcdefgeijklmnopqrstuvwxyz</p>

実際にIE10で表示した結果がこちら
2013-06-20_12h53_01

おお~、欧文(ローマ字)だけフォントが変わってる!
ひとつ知識がふえました。

参考にさせて頂いた記事
本文ゴシック体のCSSフォント指定(日本語/欧文 font-family)再考。Mac, Win, iOS, Android 対応 | Stack Stack!

関連記事

コメントは利用できません。