@font-faceを使用してウェイト別に異なるフォントを割り当てる (太字に別フォントとか)

Webフォントの利用でばかり注目される@font-faceですが、個人的にはこちらの用途のほうが感動したというか。太字を持たないフォントでBold指定をすると汚くなる問題が解決する。かもしれない。

@font-faceには読み込むフォント自体の指定の他に、読み込む条件としてfont-weightやfont-styleを指定できるとのこと*1

たとえば、下記のようにして本文は明朝、太字はゴシックな"Hiragino"というフォントファミリを定義し、それを各HTML要素のfont-familyで指定する。

@font-face {
  font-family: "Hiragino";
  src:local("Hiragino Mincho ProN W3");
  font-weight: normal;
}

@font-face {
  font-family: "Hiragino";
  src:local("Hiragino Kaku Gothic ProN W6");
  font-weight: bold;
}

* {
  font-family: "Hiragino";
}

Firefox 14.0.1 (OS X Mountain Lion)で見ると↓な感じ。ちなみにChromeSafariではダメだった。

f:id:ymkn:20120820100902p:plain

<!DOCTYPE html>
<head>
<title>ウェイト別に異なるフォントを割り当てるテスト</title>
<style type="text/css">
@font-face {
	font-family: "Hiragino";
	src:local("Hiragino Mincho ProN W3");
	font-weight: normal;
}

@font-face {
	font-family: "Hiragino";
	src:local("Hiragino Kaku Gothic ProN W6");
	font-weight: bold;
}

.normal {
	font-family: "Hiragino";
	font-weight: normal;
}

.bold {
	font-family: "Hiragino";
	font-weight: bold;
}
</style>

</head>
<body>
<h1>ウェイト別に異なるフォントを割り当てるテスト</h1>
<h2>何も指定しない場合</h2>
<div style="font-weight: normal">font-weight: normal; 通常のウェイト</div>
<div style="font-weight: bold">font-weight: bold; 太字</div>

<h2>@font-faceで通常のウェイトと太字のフォントを個別に指定</h2>
<div class="normal">font-weight: normal; 通常のウェイト</div>
<div class="bold">font-weight: bold; 太字</div>

</body>

stylishとかuserChrome.jsとかで使えば、自分のブラウザで使用するフォントを自分の好みに細かく調整できる。各種ブラウザの対応状況がマチマチなので、一般向けに使うにはまだ厳しいかもしれません。

ちなみにWindowsを起動するのが面倒だったので問題児IEでは試していない。誰かお願いします。

*1:そのほかに、仕様ではunicode-rangeというデスクリプタもあるみたいで、これ、うまく使えば漢字、ひらがな、カタカナ、英字、数字、記号でそれぞれ別のフォントを使うこともできるということかしら・・! 試してないけどブラウザ側は対応してるのかしら