CSSでヒラギノ角ゴシックのウェイトを指定する方法

※追記あります

Mac OS X El Capitanのヒラギノ角ゴシック — Medium

ヒラギノ角ゴシックは10ウェイトあるが、CSSでは9つ（100から900まで100間隔）でしか指定できない。しかも、具体的にどのウェイトで表示されるかが、ブラウザによって異なっているようだ。

font-weightと実際に使われるウェイトの対応の表:

CSS font-weight	Firefox	Chrome
100	W0	W0
200	W2	W1
300	W3	W3
400	W4	W4
500	W5	W5
600	W6	W6
700	W7	W7
800	W8	W8
900	W9	W9

また、normalとboldはそれぞれ400と700を指定するのと同じなのだが、今までのヒラギノ角ゴではW3とW6を使ってきたのだから、これでは少し太いかもしれない。こういう時は、@font-faceを使って、ウェイトと実際に使われるフォントの関係を直接指定してしまえばいい。

@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W0);
  font-weight: 100;
}
@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W1);
  font-weight: 200;
}
@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W2);
  font-weight: 300;
}
@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W3);
  font-weight: 400;
}
@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W4);
  font-weight: 500;
}
@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W5);
  font-weight: 600;
}
@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W6);
  font-weight: 700;
}
@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W7);
  font-weight: 800;
}
@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W8);
  font-weight: 900;
}
@font-face {
  font-family: "Hiragino Sans W9";
  src: local(HiraginoSans-W9);
  font-weight: 900;
}
div {
  font-family: "Hiragino Sans";
  font-size: 20pt;
  line-height: 1.5em;
}

<div style="font-weight: 100">ヒラギノ角ゴシック W0</div>
<div style="font-weight: 200">ヒラギノ角ゴシック W1</div>
<div style="font-weight: 300">ヒラギノ角ゴシック W2</div>
<div style="font-weight: 400">ヒラギノ角ゴシック W3</div>
<div style="font-weight: 500">ヒラギノ角ゴシック W4</div>
<div style="font-weight: 600">ヒラギノ角ゴシック W5</div>
<div style="font-weight: 700">ヒラギノ角ゴシック W6</div>
<div style="font-weight: 800">ヒラギノ角ゴシック W7</div>
<div style="font-weight: 900">ヒラギノ角ゴシック W8</div>
<div style="font-family: 'Hiragino Sans W9'">ヒラギノ角ゴシック W9</div>

10月4日追記

上の方法だと、Firefoxでは正しく表示されるが、SafariやGoogle Chromeだと、W5が正しく表示されない。
Safariでの表示
本来boldでないW5にfont-weight: 600を指定していると、機械的にboldになってしまうようだ。
やはりfont-weightを使わず、直接指定するのが無難だろう。

指定例: A Pen by Captain Anonymous