プログラミングと旅と映画の日々

普段はスマホ決済サービスの会社でバッグエンドを担当しているエンジニアです。プログラミングと趣味の映画、株、時々うどんに関してブログを書いていこうと思います。海外ドラマ、クロスバイクも好きです。

<CSS>font-familyで表示するフォントを設定する<文系エンジニアのプログラミング>

webページに表示するフォントは、コンピュータにインストールされているフォントか、ウェブフォントの中から選ぶ方法があります。

しかし、windowsMaciOSなどのOS全てにインストールされているフォントはないそう。

そのため、どんな機器から閲覧されても問題ないように、webフォントから選ぶ方法が最近では一般的なようです。

 

◆一般的なfont指定の方法

 

日本語のウェブサイトでは通常、ゴシック体を指定します。

以下、お決まりパターン

 

<style>

body{

  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", Meirio,

 "MS Pゴシック", sans-serif;

}

 

 

省略パターン

<style>

body{

  font-family: sans-serif;

}

 

*font-familyプロパティ

表示するフォントを決めるために指定するプロパティ。

複数のフォントをカンマ区切りで指定している場合、ブラウザは指定されている一番目から順番にコンピュータにインストールされているかどうか調べ、表示されます。

また、ゴシック体を指定する場合は最後に必ず「sans-serif」を入れます。

これを指定することで指定されたフォントが見つからない場合でもとにかくゴシック体で表示してくれるらしいです。

 

*通常の記法と省略パターンの違い

通常の方法では全てのブラウザで日本語フォントの文字で表示される。

省略パターンでは、半角英数字は欧文フォントが適用される。

 

◆webフォント

続いてはwebフォントの使用方法を見ていきます。

webフォントとは、ウェブページに表示するフォントをWebサーバからダウンロードしてくる機能のこと。

webフォントを使用するメリットは、フォントの選択肢が増えることとどんな機器で閲覧しても同じフォントで表示できるという2点。

 

*webフォントの使い方

以下の2パターンで使用できます。

・フォントデータを自分のWebサーバにアップロードして使う

Google Fontsなどのウェブサービスを利用

 

Google Fontsの使用例

linkをheadで指定してfont-familyに指定すればOKです。

 

<head>

<link rel = "stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosansjapanse.css">

<style>

body{

  font-family: 'Noto Sans Japanese', sans-serif;

}

</style>

</head>

*参考書籍*

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

新品価格
¥2,678から
(2017/1/31 20:14時点)