帰ってきた「しっぽのさきっちょ」

しっぽのさきっちょ: 2015-10-21 付 (2016-10-17 更新)

Web フォントに関する覚え書き

no extension

このサイトの Web フォントまわりを整理したので,覚え書きとして残しておく。

Google Noto Fonts

このサイトの Web フォントを Google Noto Fonts で統一した1

Google Noto Fonts は以下のサイトで取得できる。

このサイトでは様々なフォントが選べるが “Noto” をキーワードに以下のフォントを選択する。

  • Noto Sans : Normal 400, Bold 700
  • Noto Serif : Normal 400, Bold 700

またサブセットとして Latin を選択する。 これで,以下に示す書式で CSS ファイルを HTML の head 要素内に指定すればよい2

<link href='//fonts.googleapis.com/css?family=Noto+Sans:400,700|Noto+Serif:400,700' rel='stylesheet' type='text/css'>

Bold が不要であればもっと軽くできる3

<link href='//fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif' rel='stylesheet' type='text/css'>

CSS でフォントを指定する際は "Noto Sans""Noto Serif" で指定する。

body {
  font-family: 'Noto Serif', serif;
  font-weight: 400; /* normal */
  font-variant: normal;
  font-style: normal;
  font-size: medium;
  line-height: 1.4;
}
h1, h2, h3, h4, h5, h6, address, table th, dl > dt, em, strong, cite {
  font-family: 'Noto Sans', sans-serif;
  font-weight: 400; /* normal */
  font-variant: inherit;
  font-style: inherit;
  font-size: inherit;
}

Noto Sans Japanese

2014年, Noto Sans に Noto Sans CJK が加わった。

Noto Sans CJK を Web フォントとして使用するなら以下のサイトが参考になる。

日本語であれば “Noto Sans JP を導入すればよい4

<link href='//fonts.googleapis.com/earlyaccess/notosansjp.css' rel='stylesheet' type='text/css'>

フォント名は "Noto Sans JP" で指定する。

body {
  font-family: 'Noto Serif', serif;
  font-weight: 400; /* normal */
  font-variant: normal;
  font-style: normal;
  font-size: medium;
  line-height: 1.4;
}
h1, h2, h3, h4, h5, h6, address, table th, dl > dt, em, strong, cite {
  font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400; /* normal */
  font-variant: inherit;
  font-style: inherit;
  font-size: inherit;
}

Noto Sans JP では JIS X 0208 の文字集合を収録しているため, JIS X 0213 第3第4水準漢字はサポートされていない模様。 これらの漢字が必要な場合は Noto Sans CJK の日本語フルセットが必要となる。

Inconsolata

プログラム・コードの表示用に Inconsolata を導入する。 Inconsolata は Google Fonts を使って導入可能。 最終的に Google Fonts の書式は以下のようになる。

<link href='//fonts.googleapis.com/css?family=Noto+Serif|Noto+Sans|Inconsolata:400,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/earlyaccess/notosansjapanese.css' rel='stylesheet' type='text/css'>

また CSS の記述は以下のようになる。

body {
  font-family: 'Noto Serif', serif;
  font-weight: 400; /* normal */
  font-variant: normal;
  font-style: normal;
  font-size: medium;
  line-height: 1.4;
}
h1, h2, h3, h4, h5, h6, address, table th, dl > dt, em, strong, cite {
  font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400; /* normal */
  font-variant: inherit;
  font-style: inherit;
  font-size: inherit;
}
pre, tt, code, var, kbd, samp {
  font-family: 'Inconsolata', 'Noto Sans JP', monospace;
  font-weight: 400; /* normal */
  font-variant: inherit;
  font-style: inherit;
  font-size: inherit;
}

Noto Serif Japanese が欲しい!

残念ながら,現時点では Noto Serif の日本語フォントは存在しない。 有料で明朝体 Web フォントを提供してくれるサービスはあるが,デザイン重視のサイトならともかく,うちのようにただ文字が多いだけのサイトでは「お金を払ってまでねぇ」という感じ。 そこで,いくつかオープンなフォントを探してみる。

IPA 明朝

オープンなフォントといえば IPA フォントだよね。 OSD (Open Source Definition) に準拠したライセンスで提供されているため扱いやすい5

ただし IPA フォントは PDF 文書のようなものには向いてるけど, Web フォントには向いていない。 理由は以下の2つ。

  • 全体的に線が細く表示環境によっては文字がかすれてしまう。 ウェイトが1種類しかないのもマイナスポイント
  • JIS X 0213 の文字集合を全て収録しているのはいいが,データサイズが大きくなってしまう。第1第2水準漢字のみのサブセットがあればいいのに

あおぞら明朝

IPA 明朝(厳密には IPA P明朝)からの fork で,7ウェイトをサポートしているのが特徴。 ライセンスも IPA フォントライセンスを継承している。 欠点は以下のとおり。

  • ベースがプロポーショナル・フォントなので見た目が詰まった感じになってしまう
  • IPA フォントと同じく JIS X 0213 の文字集合を全て収録しているのはいいが,データサイズが大きくなってしまう

やさしさアンチック

アンチック体あるいは「アンチゴチ」と呼ばれる書体で,漢字はゴシック体,かな文字等は明朝体で表現されるのが特徴。 IPA フォントおよび M+ フォントがベースになっているため,ライセンスもこれらに準拠する形になっている。

見出しや短文に向いている。 長文はちょっとしんどいか。 第1第2水準漢字までをサポートしており,サイズ的にも手頃といえる。

もう WOFF でいいじゃない

複製・再配布が自由なフォントであれば WOFF (Web Open Font Format) に変換6 して Web フォントとして利用可能。 WOFF への変換には,以下のツールが使える。

作成した WOFF ファイルを使って CSS 内に @font-face を定義する。

@font-face{
    font-family: 'aozora-m';
    src: local('AozoraMinchoMedium'), url('/fonts/AozoraMinchoMedium.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

これで定義したフォント名 "aozora-m" を使って CSS に記述することができる。

body {
  font-family: 'Noto Serif', "aozora-m", serif;
  font-weight: 400; /* normal */
  font-variant: normal;
  font-style: normal;
  font-size: medium;
  line-height: 1.4;
}

Web フォントの形式はいくつかあるが,少なくとも Modern browser であれば WOFF をサポートしている。 IE のことは忘れましょう(笑)

その他の Web フォント

Google Noto Fonts 以外で利用しているフォントを列挙しておく。

Font Awesome

みんな大好き Font Awesome。 アイコンを文字として扱うことができる。 head 要素に以下の記述を加える事で使えるようになる。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

使い方は簡単。

<i class="fa fa-btc"></i> 1 = <i class="fa fa-jpy"></i> 31,246.5
1 = 31,246.5

Creative Commons Icon Font

CC License のアイコンやバナーを文字として扱うことができる。 head 要素に以下の記述を加える事で使えるようになる。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/cc-icons/1.2.1/css/cc-icons.min.css">

使い方は Font Awesome と同じ。

<i class="cc cc-by cc-2x"></i> <i class="cc cc-sa cc-2x"></i>
 

関連(するかもしれない)記事


  1. “Noto” は “No-Tofu” の意味らしい。昔はフォント・セットに該当文字がない場合に表示される「□」を「トーフ(豆腐)」と呼んでいた。つまり Noto Fonts は世界中のすべての文字を統一デザインで網羅するという壮大なプロジェクトである。 [return]
  2. Google Fonts サイトでは @import 文を使った書式や JavaScript による読み込みコードも例示されている。 [return]
  3. Modern browser では Bold や Italic がなくとも機械的に合成される(Italic は斜体(slant)で代用)。当然ながら綺麗ではない。 Bold や Italic を多用しないのであれば Web フォントから外す手はある。 [return]
  4. Noto Sans JP は Noto Sans Japanese から 350 のウェイトを削除しているらしい。アホなブラウザが 350 という値をうまくハンドリングできないからだそうな。まぁ文章の中で使うだけなら多くても 400 と 700 のふたつがあれば充分なのでこれで問題ないし,ダウンロードサイズが小さくなるのも魅力である。 [return]
  5. さまざまなライセンスとそれらについての解説 - GNUプロジェクト」では IPA フォントライセンスは GPL とは両立しないとある。派生作品ではオリジナルの名前を含めてはいけない,という制限があるため。 [return]
  6. 機械的変換であれば翻案ではなく「逐語的コピー」とみなせる。 [return]