英字と日本語が並んだhtmlの自体をcssで指定したい

htmlで「お茶碗ochawan（仮）」という文字をcssで日本語と英字それぞれをNotosansとPhilosopherの字体にしたいのですが、「font-family: "Notosans""Philosopher":で書くと無効になってしまいます。プログラミングの期間限定の教室で習った時はこんな感じで書けばいいと言われた気がしますが、どう書くのが正解ですか？

質問者からの補足コメント

• すみません、「英字」は解決したのですが、今度は「数字」とのフォント分けができません、どうすればいいのでしょうか？

    補足日時：2023/05/23 00:12

No.2 回答者： Ogre7077 回答日時： 2023/05/23 10:24

> 今度は「数字」とのフォント分けができません

一般的には英字と数字は纏めた書体が多いので、
{ font-family: "数字書体", "英字書体", "邦字書体", 総称; }
と指定しても英字書体は無視されると思います。

数字だけ別要素で囲んで別途指定するのが現実的でしょう。
<style>
.ochawan { font-family:"英字書体","邦字書体",sans-serif; }
.ochawan var { font-family:"数字書体",sans-serif; font-style:normal; }
</style>
<div class="ochawan">
お茶碗ochawan（仮）<var>123</var>
</div>

参考)
https://developer.mozilla.org/ja/docs/Web/HTML/E …
https://developer.mozilla.org/ja/docs/Web/CSS/fo …
https://developer.mozilla.org/ja/docs/Web/CSS/fo …

この回答へのお礼

ありがとうございます！

お礼日時：2023/05/23 22:43

No.1 回答者： ミラ-_- 回答日時： 2023/05/23 00:01

<style>

.ochawan {
font-family: "Notosans", "Philosopher", sans-serif;
}
</style>

<div class="ochawan">
お茶碗ochawan（仮）
</div>

上記の例では、`font-family`プロパティに`"Notosans", "Philosopher", sans-serif`と指定しています。フォント名を指定する際には、カンマで区切って個別に記述することが重要です。各フォントがインストールされていない場合、ブラウザは指定された順番に代替のフォントを探し、最終的にデフォルトのサンセリフ体（sans-serif）を使用します。

このように記述することで、「お茶碗ochawan（仮）」というテキストが、"Notosans"と"Philosopher"のフォントを優先して表示されるようになります。

この回答へのお礼

ありがとうございます！

お礼日時：2023/05/23 00:05