オールドスタイルな数字っていうのはGeorgiaとかで見るオシャレなあの数字のこと。Corbelというx-heightが高めでオープン・カウンターという読みやすさ重視のなかなか優秀なサンセリフ体もオールドスタイル。ただ和文とは相性が良くないので、どうにかして数字だけ普通のものに差し替えてみようという試み。
unicode-range
プロパティー@font-face
ディレクティブのunicode-range
プロパティーでカスタム・フォントを作成するテクニックを使ってCorbelの数字をCalibriに置き換えてみる。
Demo: Use non oldstyle numbers for Corbel
Chrome 20とInternet Explorer 9で反映される。それ以外ではunicode-range
プロパティーが無視されるので、アルファベットや記号も含めて完全にCalibriになる。
@font-face {
font-family: "Corbel-Mod";
src: local("Corbel");
}
@font-face {
font-family: "Corbel-Mod";
src: local("Calibri");
unicode-range: U+0030-0039;
}
.test {
font-family: "Corbel-Mod", sans-serif;
}
という形でlocal()
で読むのでパフォーマンスに影響は殆どない。CorbelもCalibriもないOS Xなどではどうなんの……みたいな感じだけど、そもそもどこの誰でもCorbelを使わせようみたいな話ではないので関係ない。
font-feature-settings
プロパティーリガチャで脚光を浴びつつあるfont-feature-settings
プロパティーでもlnum
を有効にしてやることでChrome 20やFirefox 14(多分4以降)、Internet Explorer 10では可能。
Demo: Use non oldstyle numbers for Corbel #2
ちゃんと設計されたグリフが採用されるのと概ね直観的なプロパティーの記述で済むのが良いところ。
.test {
font-family: "Corbel", sans-serif;
font-feature-settings: "lnum" 0;
}
最初font-feature-settings
プロパティーでonum
を明示的に無効にしたら普通の数字になるんじゃないかと思って試したんだけどダメだった。それでunicode-range
プロパティーのを窮余の策として考えだしたんだけど、やり方が全然間違っていただけだった……。OpenTypeの仕様も読まないとなぁ……。
後者のfont-feature-settings
プロパティーを使う方が将来的に安全で字形的に安定だと思う。unicode-range
プロパティーだとInternet Explorer 9で反映されるというメリットはあるので、条件付きコメントとかで切り分けたりするとかも良いかも。今度どこかでCorbel使おう。