Ｗｅｂフォント（その２）

前回に引き続き、Ｗｅｂフォントについて紹介します。

Ｗｅｂフォントの実際の使い方について、少し説明します。

まず準備として、ＣＳＳ３の中にある@font-face規則を利用します。記載方法は、

@font-face {
font-family : ‘フォント名’;
src : url(‘フォントのURL’) format(‘フォント形式’) ;
}

といった感じです。ここで注意が必要なのが、フォント形式によっては閲覧環境によってうまく見れないものもあるということです。最近のブラウザだけなら問題ありませんが、古い環境でも見せたい場合は閲覧させたい環境にあった形式を用意してください。

準備ができたら、あとは一般的なフォントと同様

font-family: ‘フォント名’;

で装飾したい場所に設定すればＯＫです。意外と簡単ですよね。ブラウザによって若干見た目は変わるかもしれませんが、一般的なフォントと明らかに違う印象はなかなかインパクトがあります。

また、有償になりますが、フォントサーバー側の工夫で必要な文字フォントだけを使用できるようなものもありますので、既存フォントの速度ではないですが、表示の高速化が図れているものもあります。

今までは仕方なく、画像でつくって、代替文字にしていたことが普通に文字として使えるのはとても大きなメリットだと思います。気になる方はぜひお試しください。

海外のサービスですが、日本語もあります。バッチ広告を付ける必要がありますが、無料プランもあります。SONYやIBM、インテル等の企業も利用しているようです。

Adobe Creative Cloudのユーザーが利用できるサービスですが、条件を限定すると無料でも利用できます。Adobeユーザーならぜひ使ってみてほしいです。

文字のデパートを意味したＷｅｂフォントのサービスです。ブログパーツで組み込むので、ブログサービスが対応している必要がありますが、簡単に組み込める分、利用しやすいです。無料です。

有償ですが、800書体以上もあるサービスです。上記に書いたようにページのテキストを分析し、必要なフォントのみ抽出するため、表示が速いようです。

◆日本語Webフォントサービス
http://www.digitalstage.jp/webfont/

ホームページ制作ソフトBiNDを販売しているデジタルステージが提供しているサービスです。 434種類のフォントが使えます。BiNDとセットで使うと便利です。