Webフォント (Web Fonts)
Web Fontsとは、そのフォントが必要なときにサーバなどからダウンロードし、一時的にインストールして使用できる技術です。この仕組みを利用すると、クライアントがこれに対応したブラウザを使用していれば、クライアントのOSにインストールされていないフォントでも表示できるようになります。
@font-face
@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; ]
}
Formal syntax - @font-face - CSS | MDN
<style type="text/css"> /* Webフォントの定義 */ @font-face { font-family: myFont; /* フォント名の指定 */ src: url('http://example.com/myFont.ttf'); } body { font-family: myFont; /* 定義されたフォントの利用 */ } </style>
ブラウザの設定によっては、この指定が無視され代替の記号となります。この設定はたとえばIE9ならば、インターネット オプションの[全般]の[ユーザー補助]にある、[Web ページで指定されたフォント スタイルを使用しない]がそれになります。Firefox cannot render icons from Font Awesome webfont set - Super User
| IE9 | IE9 (設定で無視) | Firefox (設定で無視) |
|---|---|---|
 |
 |
 |
Font Awesome
SIL Open Font Licenseで、さまざまなアイコンが含まれるフォントが提供されています。
これを利用するにはCDNに置かれたデータを参照する方法と、データをダウンロードして必要な情報だけを記述する方法があります。
CDNにあるフォントとスタイルを利用
サーバ上のスタイルを参照するように指定します。
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
Font Awesomeのデータを提供するCDNには、次のようなものがあります。
- https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css
- https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css
表示したい文字をFont Awesome Iconsで確認し、そのクラス名を次のように指定します。
<i class="fa fa-glass"></i>
ダウンロードしてフォントだけを利用
Font Awesomeから「font-awesome-x.x.x.zip」の名前のファイルをダウンロードします。そしてそれのfontsフォルダから必要なフォントファイルをコピーし、@font-faceでそのファイルを参照するように指定します。
またFont Awesome Iconsで必要な文字のコードを確認し、それをcontent属性で表示するようにスタイルを定義します。
<style type="text/css">
@font-face {
font-family: FontAwesome;
src: url('fontawesome-webfont.woff') format('woff');
}
.foo:before {
font-family: FontAwesome;
content: '\f000';
}
</style>
そしてそのクラスを指定して、文字を表示します。
<span class="foo"></span>
参考
フォント形式
Webフォントで利用できるフォント形式には、以下のようなものがあります。
- TTF (True Type Font)
- OTF (Open Type Font)
- EOT (Embedded OpenType)
- SVG Font (Scalable Vector Graphics Font)
- WOFF (Web Open Font Format)
WOFF (Web Open Font Format)
参考
- WebFonts Working Group public page
- Web Fontsの歴史と使い方 - ＠IT ひらいさだあき (～2011/12/13)
- Icons Tutorial | W3Schools