CSSの日本語フォントを使う方法【現役エンジニアが解説】
今回は、CSSの日本語フォントを使う方法について、3つのパターンに分け、簡単に解説していきます。
日本語フォントを使う
OSによって使える日本語フォントは異なります。
しかし、”ヒラギノ丸ゴ ProN”はWindowとMacの両方で使えます。
body{ font-family:"ヒラギノ丸ゴ ProN", sans-serif; }
上記のコードでは、body要素で”ヒラギノ丸ゴ ProN”のフォントを使用しています。
英語に欧文フォントを使う
英語と日本語とで使用するフォントを分けることができます。
この場合、英語用の欧文フォントを日本語フォントよりも先に指定します。
body{ font-family:"Helvetica", "ヒラギノ丸ゴ ProN", sans-serif; }
上記のコードでは、body要素で英語用のHelveticaと日本語用の”ヒラギノ丸ゴ ProN”を指定しています。
日本語のWebフォントを使う
日本語フォントでも、デザインの面でWebフォントはおすすめです。
GoogleフォントのAPIのCSSを読み込む方法もありますが、自分のサーバに用意しても良いでしょう。
@font-face { font-family:"任意のフォント名"; src:url("任意のフォント名.woff") format("woff"), url("任意のフォント名.ttf") format("truetype"), url("任意のフォント名.otf") format("opentype"), url("任意のフォント名.eof") format("embedded-opentype"), url("任意のフォント名.svg") format("svg"); } body{ font-family:"任意のフォント名"; }
上記のコードでは、任意のフォント名を作り、フォントファイルを読み込み、body要素でそのフォントを使っています。