CSS

2017/05/12

ここからはWebフォントなしでお送りします。この上の文章はすでにWebフォントを適用しておりました。ここは適用しておりません。safariでご覧の方は同じように見えるのでしょうか？Windowsしか使わない私にとってはMacイコールsafari、safariイコール文字はちょっと太くてかっこいい。という勝手なイメージです。GoogleさんのWebフォントを使えばサファリブラウザで見ているような感がします。さらに上は自動の文字詰めが効いております。

まず導入方法ですが、Webフォントですから、 CDN(Content Delivery Network-コンテンツ・デリバリ・ネットワーク）と同じように読み込みます。和文ですから結構なファイル量になるそうですのでコンテンツが表示さるまでの時間が大切な商用サイトなどでは、いろいろと工夫してください。

和文フォントも何種類かあるようですが、今回は、 Noto Sans Japaneseまたは、Noto Sans JPというのを使います。Notoというはノー豆腐ということらしく該当する文字がなくて□が表示されないように頑張りましたと言ことらしいです。該当文字がなくて表示される四角を豆腐と呼ぶことに由来するということで面白ですね。Noto Sans JapaneseとNoto Sans JPはよく似ているそうなんですけどNoto Sans JPは プロポーショナルメトリクス情報（文字詰めするときの幅だと思います）を持っているので自動カーニングの指定をしてあげれば文字間が詰まってカッコよくなるということです。

HTML

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

とします。一応HTML側でLINK要素で読み込んでから適応したい要素にCSSでフォント指定する方法があります。

CSS

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

もしくは@importでCSSの中で読み込んで使用する方法もあります。この場合はLINK要素は不要です。

CSS

@import url("http://fonts.googleapis.com/earlyaccess/notosansjp.css");
body{
font-family: 'Noto Sans JP', sans-serif;
}

ただし、@importは通常のCSSの後には記述できないというルールがありますので最初に記述しておく必要があります。

ここでWebフォントをダウンロードするのにCSSファイルをインポートするとはこれいかに？と思われませんか。私は思いました。なのでインポートするCSSを覗いてみると

CSS

/*
* Noto Sans JP (japanese) http://www.google.com/fonts/earlyaccess
 */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 100;
  src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Thin.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Thin.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 300;
  src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.otf) format('opentype');
}

@font-face {
   font-family: 'Noto Sans JP';
   font-style: normal;
   font-weight: 400;
   src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans JP';
   font-style: normal;
   font-weight: 500;
   src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans JP';
   font-style: normal;
   font-weight: 700;
   src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans JP';
   font-style: normal;
   font-weight: 900;
   src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.otf) format('opentype');
 }

というCSSになっていました。@font-faceというのがたくさんあります。これはまあ、フォントをダウンロードしてねということだと思いますね。1つの@font-faceの中にwoff2とwoffとotfと3つずつあります。それぞれが、書体で WOFF とはWeb Open Font Formatとのことです。何のことかわかりませんね。おそらくブラウザ（OS?）ごとに使える書体のフォーマットが違っているらしく3つ読み込んでおけば、大体大丈夫でしょうということらしいです。

さらにその3つの組み合わせの@font-faceが6つあるのは文字の太さ（font-weight）ごとにfontが別個にあるからなんですね。都合3フォーマット×6weightで18個もfontを読み込んでいます。ちょっと重いかもしれません。

しかし、font-weightの300や900などの数値指定が使えるんですね。

CSS

@font-face{
font-family: 'Noto Sans JP';
src:local('Noto Sans JP'),
  url(http://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
  url(http://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
  url(http://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
}

ノーマルの太さ、font-weight:400しか使わないのであれば上記の@font-faceの指定だけでいいかもしれません。おそらく単純にダウンロード量は6分の1になるんだと思います。念のためもしデバイスにNoto Sans JPがインストールされていたらそれを使うようにlocalを入れていますが、そんなデバイス期待できますかね。

太字も欲しければfont-weight:700あたりも追加しておけばいいでしょう。ただし、urlのところはhttp://から始めてください。

文字詰め カーニング

カーニングはfont-feature-settingsというCSSのプロパティーで実現できます。先ほども記述してありますが、元のフォントに文字詰めした時の情報が含まれていないければこれは効きませんので気を付けてください。

CSS

font-feature-settings : "palt" 1;

としてあげればOKです。 font-feature-settingsのpaltが文字詰めするということで後ろの1はonということらしく字詰めする場合は省略できます。１か0、onかoffだそうです。

私の探し方が悪いのでしょうが、上のW3Cのリンクにはpaltが見つかりません。なぜかAdobeさんに詳しい説明があります。どうやら Noto Sans JapaneseやNoto Sans JPはAdobeさんとGoogleさんの共同開発らしいです。

Can I useによればほとんどのブラウザで使えるようなのですが、Adobeさんのページにあるようないろいろなプロパティー値は全部ブラウザで使えるかどうかは、わかりません。DTPなどで使うのかもしれません。