TIL

Today I Learned. 知ったこと、学んだことを書いていく

フォントの種類の設定 font-family - CSS

CSS

font-familyプロパティを使う

  • 複数指定する場合、,で区切る
  • フォント名に空白や日本語が入っている場合、"で囲む

書いてある順番でフォントがあるか確認していく。あれば、そのフォントで表示する

フォントの種類を設定するには以下の２つがある

  • 端末にインストールされているフォントを使う
  • Webフォントを使う

端末にインストールされているフォントを使う

インストールされているフォントを使う場合には、使用するフォントを複数記述するのが一般的

例

body {
    font-family: Meiryo, "MS　Pゴシック", sans-serif;
}

メモ：セリフ体(serif)とサンセリフ体(sans-serif)

セリフはフランス語で「アクセント」という意味らしい。また、サンはフランス語で「ない」という意味らしい。

Webフォントを使う

フォントをWebページからダウンロードして表示することもできる。Google Fontsというサービスを使ってみる

Noto Sans Japanese を使う場合にはheadタグ内に以下の記述追加する

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

また、font-familyで以下の記述をする

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

Google Fontsの使い方

  1. Google Fontsにアクセスする
  2. 右のサイドバーで条件を絞る
  3. 使用したいフォントを見つけたら、フォント名の右の+をクリック
  4. 下の方に出てきたFamily Selectedをクリック
  5. Embed FontのソースをHTMLファイルのhead内に記述する
  6. Specify in CSSのソースをCSSファイルの適用したいセレクタに記述する

Ubuntuで試してみたけど、日本語での違いはよくわからなかった...でも、アルファベットは変わってた！！Ubuntuみたいでテンション上がった

参考文献

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

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