フォントの基本 @Font-Face の使い方

@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