font-familyで英語の文字は英語フォントで、日本語の文字には日本語フォントで表示させたい

Question

body {
font-family: "Avenir", "Osaka", sans-serif;
}

環境はクローム（Mac）ですが、cssに上記を記述した際、日本語の文字もAvenirで表示されてしまいます。body内で英語の文字はAvenirで、日本語の文字はOsakaで表示させたいのですが、他にも必要な記述があるのでしょうか？

googleフォントなど他のパターンでも試しましたが、最初に記述した英語フォントが全てに適用されてしまいます。

恐れ入りますがよろしくお願い致します。

Comments

[yoshinavi]

＞日本語の文字もAvenirで表示されてしまいます。

→　日本語対応しているのでしょうか？デベロッパーツール等で確認されていますか？

[shinaok]

デベロッパーツールで何度も確認はしたのですが、日本語対応しているというのはどの項目を見れば分かるのでしょうか？

Answer 1

日本語の文字もAvenirで表示されてしまいます。

私はWin環境なので、同じMac環境ではありませんが、フォントが日本語自体に対応していなければ、いくら設定しても表示はされません。

デベロッパーツールで何度も確認はしたのですが、日本語対応しているというのはどの項目を見れば分かるのでしょうか？

Googleよりは、Firefoxの開発者ツールが、フォント確認は見やすいし分かりやすいです。

Win環境の場合ですが、Firefoxの開発者ツールを使った例です。
以下のように表示設定をした場合

ABCDEFGあいうえお123壱弐参

body {
  font-family: "Times New Roman", "meiryo", sans-serif;
  font-size: 50px;
  font-weight: bold;
}

HTMLの表示

---

開発者ツールでフォントを選び

---

使用フォントが表示されますので、各フォントにカーソルを合わせると、該当フォントが反転して表示されます。
※上がMeiryo Boldを選択したもの
※下がTimes New Roman Boldを選択したもの

参考にしてみてください。

Answer 2

@font-faceにunicode-rangeを指定して範囲指定する、というのはどうでしょうか。

@font-face{
  font-family: 'avenir-ascii';
  src: local('Avenir');
  unicode-range: U+0000-00FF;
}

body {
  font-family: 'avenir-ascii', "Osaka", sans-serif;
}