CSS3の@font-faceについてのメモ

   

@font-faceはWebフォントを指定するためのCSS規則。
構文
@font-face {
[font-family: <family-name>;]?
[src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
[unicode-range: <urange>#;]?
[font-variant: <font-variant>;]?
[font-feature-settings: normal|<feature-tag-value>#;]?
[font-stretch: <font-stretch>;]?
[font-weight: <weight>];
[font-style: <style>];
}
引用元：Mozilla Developer Network(https://developer.mozilla.org/ja/docs/Web/CSS/@font-face)

family-name
フォント名(ここで指定した名前を、使いたい箇所のfont-familyに記述する)

uri
フォントファイルのURL。カンマで区切って複数指定可能。
url("URL")もしくはlocal("インストールされているフォントのフォント名")の形で指定する。
※localで呼び出す際のフォント名はブラウザやOSによって、フルネームで指定するかPostscript名で指定するかが異なるため、複数指定しておいた方が良い
  1. src: local("Arial"), local("ArialMT");
  2. /* Arial = Full name , ArialMT = Postscript name */

formatは以下の通り
・Web Open Font Format(.woff)：woff
・TrueType(.ttf)：truetype
・OpenType(.ttf, .otf)：opentype
・Embedded OpenType(.eot)：embedded-opentype
・SVG Font(.svg, .svgz)：svg

unicode-range
Unicodeのコードポイントで指定。Webフォントを使用する範囲を限定することが出来る。複数指定可能。
  1. unicode-range:U+0000-007F; /* 基本ラテン文字のみ */
  2. unicode-range:U+0026; /* &のみ */
  3. unicode-range:U+003?; /* U+0030-003F */
  4. unicode-range:U+0026, U+0030-0039; /* &と数字のみ */

font-variant, font-feature-settings
ここで指定した値がWebフォントを呼び出す際の初期設定になる。
font-feature-settingsはOpenTypeフォントの機能を利用するためのプロパティ。

例）
  1. font-feature-settings:"liga" 0; /* リガチャ無し */
  2. font-feature-settings:"zero" 1; /* ゼロにスラッシュを付ける */
  3. font-feature-settings:"fwid" 1; /* 半角カナを全角で表示 */
(実際に使用するときにはベンダープレフィックスが必要)
(実装済みブラウザでも、@font-face規則の中で使うとまだうまく動かなかったり)

font-stretch, font-weight, font-style
CSSプロパティの値が一致する場合にWebフォントを使用する。


▸▸テストページ


参考：
CSS Fonts Module Level 3 | W3C
http://www.w3.org/TR/css3-fonts/
font-feature-settings | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/font-feature-settings
OpenType Layout tag registry | Microsoft
http://www.microsoft.com/typography/otspec/ttoreg.htm

〈