font-family

p.test { font-family: "ＭＳ Ｐゴシック", sans-serif;}
p.test1 { "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}

<p style='font-family: &quot;ＭＳ Ｐゴシック&quot;, sans-serif;'>ここはp要素です。『font-family: &quot;ＭＳ Ｐゴシック&quot;, sans-serif』と指定しています。</p>

<p style='font-family: &quot;Hiragino Kaku Gothic ProN&quot;, Meiryo, sans-serif;'>ここはp要素です。『font-family: &quot;Hiragino Kaku Gothic ProN&quot;, Meiryo, sans-serif』と指定しています。</p>

フォントファミリーを指定できます。

フォントファミリーを指定する際は閲覧しているOSにフォントがインストールされていない場合を考え複数の値を指定しておくようにすると良いでしょう。より前方に指定してあるフォントが優先的に反映されます。区切りは『,』を使用します。

p.test { font-family: "ＭＳ Ｐゴシック", sans-serif;}
p.test1 { "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}

『WindowsOS』での無難なフォントファミリーの指定についてですが、『Windows XP』のサポートが切り捨てられた今現在は『メイリオ』フォントを指定しておくのが無難です。『Windows Vista』以降のWindowsOSには全て『メイリオ』がインストールされています。

ちなみにWindowsOS上で動作するほぼ全てのブラウザでは標準フォントが『ＭＳ Ｐゴシック』となっていますので『ＭＳ Ｐゴシック』をわざわざ指定する必要ない、と考えてしまって問題ないかと思います。

『MacOS』の場合は『Hiragino Kaku Gothic ProN』を指定するようにすると良いでしょう。『MacOS』は古いデバイスの切り捨てが早く、『Hiragino Kaku Gothic Pro』から『Hiragino Kaku Gothic ProN』へ切り替えが行われたのはかなり前なので、『Hiragino Kaku Gothic ProN』だけ指定しておけば問題ありません。『Osaka』に関しても同様です。

尚、『MacOS』の『Safari』では日本語のフォントファミリーの指定は無効となりますのでご注意ください。『ヒラギノ角ゴ ProN』ではなく『Hiragino Kaku Gothic ProN』と指定する必要があります。ちなみに『MacOS』の『Firefox』などでは日本語でのフォントのファミリーの指定が可能ですので『日本語のフォント名』をCSSハックなどの目的で使用するのは少々難しいでしょう。

『MacOS』での『メイリオ』フォントについてですが、MacOS用のOfficeなどをインストールすると『メイリオ』フォントも同時にインストールされます。なのでかなりの数のMacOSに『メイリオ』がインストールされている、と考えておきましょう。逆に『Windows OS』には『Hiragino Kaku Gothic ProN』がインストールされているパターンは少なめなので、『Windows OS』では『メイリオ』、『MacOS』では『Hiragino Kaku Gothic ProN』、と出し分けしたい場合は以下のようにすると良いかもしれません。『Hiragino Kaku Gothic ProN』が手前にいるのがポイントです。

p { "Hiragino Kaku Gothic ProN", Meiryo;}

『iOS(iPhone)』は『Hiragino Kaku Gothic ProN』を指定しておくのが無難です。ちなみに『iOS』は『Hiragino Kaku Gothic Pro』がインストールされていないのでご注意ください。

『Android』デバイスに関しては、デバイスによってインストールされているフォントの種類やアンチエイリアスのかかり具合の差が激しすぎるため、フォントファミリーの指定はほぼ不可能と考えて良いです。

上記の事を踏まえた無難なフォントファミリーの指定は以下となります。ゴシック系フォントで構築するならば以下を記述しておけば大きな問題は発生しないでしょう。

p { "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}

尚、『font-family』プロパティで『日本語フォント』の前に『英語の文字データしか含んでしていないフォント』を指定することで英語は英語フォント、日本語は日本語フォント、といったような『合成フォント』を構築することができます。以下は英字フォントである『Times』もしくは『Times New Roman』と日本語フォントの合成例です。

p { Times, "Times New Roman", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}

フォントファミリーはデザインの方向性によって様々なパターンがありますが、『メイリオ』フォントの扱いと『日本語でのフォント名』の扱いにはご注意下さい。