iStudio 2|21 ロゴ

Extra

CSS スタイルシート雑技 No. 3

Safari で和文フォントを指定する方法

知ってしまえば何という事はないですが、フォント名を和文ではなく英文で指定すれば解決!です。

解説

Apple Macintosh をお使いの方、特に Mac OS X を使用されている方にとって、「ヒラギノ角ゴ Pro」「ヒラギノ角ゴ Std」「ヒラギノ丸ゴ Pro」そして「ヒラギノ明朝 Pro」という美しいフォントが、OS に標準装備されているのですから、そのフォントを CSS で指定したい、と「 font-family: 'ヒラギノ角ゴ Pro W3'; 」と記述された方もいらっしゃるでしょう。
ところが、Mozilla 系のブラウザでは反映されるにも関わらず、 Safari ではこの指定が反映されません。
これらを Safari で反映させるには、フォント名を和文ではなく英文で指定すれば解決します。

<style type="text/css">

 /* ヒラギノ角ゴ Pro W3 */
 span.HiraginoKakuGothicPro{ font-family: 'Hiragino Kaku Gothic Pro'; }
 
 /* ヒラギノ角ゴ Std W8 */
 span.HiraginoKakuGothicStd{ font-family: 'Hiragino Kaku Gothic Std'; }
 
 /* ヒラギノ丸ゴ Pro W4 */
 span.HiraginoMaruGothicPro{ font-family: 'Hiragino Maru Gothic Pro'; }
 
 /* ヒラギノ明朝 Pro W3 */
 span.HiraginoMinchoPro{ font-family: 'Hiragino Mincho Pro'; }
 
</style>


<span class="HiraginoKakuGothicPro">ヒラギノ角ゴ Pro W3</span>
<span class="HiraginoKakuGothicStd">ヒラギノ角ゴ Std W8</span>
<span class="HiraginoMaruGothicPro">ヒラギノ丸ゴ Pro W4</span>
<span class="HiraginoMinchoPro">ヒラギノ明朝 Pro W3</span>



注意点

Safari では、ヒラギノ角ゴ Pro のように、ウエイトが2つ以上あるフォントについては指定出来ません。軽いほうのウエイトが適応されます(W3とW6があるならば、W3)。

なお、これは補足ですが、 Safari では、外部のスタイルシートファイルを読み込む場合、漢字コードが Shift JIS である必要があります。外部ファイルにするのではなく HTML のヘッダ部に記述するのであれば、そのファイルの漢字コードは何でもかまいません。
また、 Macintosh 版 Internet Explorer 5.2 は、和文でのフォントファミリ名を受け付けますが、その際漢字コードは Shift JIS である必要があります。
例えば外部ファイルによるスタイルシートを使う場合、その外部ファイルの漢字コードは Shift JIS で書いておいて下さい。呼び出す側の HTML ファイルは、どの漢字コードでも問題ないようです。

<meta http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">
<meta http-equiv="Content-Style-Type" content="text/css; charset=Shift_JIS">

<link rel="stylesheet" type="text/css" href="スタイルシート名">