コンテンツへスキップ

@font-face の指定

CSS3から使える @font-facce 規則を使用することによってウェブフォントやローカルフォントを使用することが出来る。

基本

最低限必要なのは任意のフォント名とURLのみ

font-family: 任意の名前を付けられる

font-style: その書体に normal や italic 等のスタイルバリエーションがあれば記述。

  • normal=標準
  • italic=イタリック体(手書きのような斜体)
  • oblique=斜体

この3つのバリエーションがある。

font-weight: その書体に 400,500,等の太さ指定があれば記述。
weight は9段階に分かれていて100~900の数値で表され、数値が大きくなるほど太くなる。

format は省略可能 otf(Open Type Font) か ttf(True Type Font)最近はWOFF(Web Open Font Format)が主流になりつつあり、WOFF2も広まりつつある。EOT は IE
のみに対応。

src: そのフォントの場所を指定。相対パスでも絶対パスでも良い。自分の PC にインストールされているフォントを使う場合は src: local('フォント名'); と記述。

localのフォント名は FontBook を起動して右クリック「Finder に表示」でファイルが表示されるので、拡張子を取ったファイル名をそのまま入力。

たとえば Google Fonts にある「Oswald」というフォントを例にすると。

localの日本語フォントはここが見やすい
フォントカタログ・標準の日本語フォント
http://rinrin.saiin.net/~aor/fonts/fonts

フォント指定の基本がわかっていなかったのでメモ

font-family: aaa-font, bbb-font, '日本語フォントC', ccc-font, sans-serif;

フォントの優先順位

書き順は優先度の高いフォントファミリー名をカンマで区切って書き、
最後にはゴシック系(sans-serif)明朝体(serif)のどちらかを表記しておく。

欧文書体を先に指定

はじめに日本語フォントを指定してしまうとアルファベットも全て日本語フォントになってしまうため、アルファベットだけを別の欧文書体で指定したいときは欧文書体を先に書く。
arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN"

日本語フォント名は囲む

日本語フォントファミリー名はクォーテーション又はダブルクォーテーションで囲む
"ヒラギノ角ゴ ProN W3"

欧文書体名も場合によって囲む

欧文書体も arial のような単語表記の文字ならいいが、"arial black" のような場合はダブルクォーテーションで囲んでおく。

日本語表記を先に指定

フォントファミリー名に日本語と英字表記のを併記する場合は日本語を先に記述する。
"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN"

%d人のブロガーが「いいね」をつけました。