@fontface 以外で任意のフォントを使う方法
@fontface を使って任意のフォントを表示させているサイトが増えてきましたが、@fontface 以外にも方法があるようで調べてみると色々見つかりました。アンチエイリアスありの状態で表示してくれるものや別サーバーから呼び出してくるウェブサービスなど、運用している環境で使い分けるといいですね。
sIFR（Scalable Inman Flash Replacement）
Shaun Inman氏が世に広めた技術ということで、JavascriptでFlashムービーに置き換え出力させています。Shaun Inman氏のサイト（2007以前）で使われていました。アンチエイリアスがかかった状態で表示されるので見た目がとてもきれいです。
DEMO：sIFR
設定方法は『選択可能なアンチエイリアス文字を出力する『sIFR 2.0』導入メモ』や、『sIFRの設置方法』にてかなり詳しく解説されています。ざっくりまとめると…
- sIFRのダウンロード：sIFR | Mike Industries のページの下の方にダウンロードリンクが用意されています。
- フォントを登録する：各所で配布されているsIFR用フォント（.swf）を入手する、sIFRGeneratorで手持ちのフォントをsIFR用（.swf）に変換する、フラッシュを扱えるようであれば、sifr.flaに直接登録してsIFR用フォント（.swf）を作成する
- sifr.jsを編集：sIFR.setup();の末尾にsIFR.replaceElement(named({sSelector:”h1″, sFlashSrc:”xxx.swf”, sColor:”#000″, sBgColor:”#FFF”})); を追加記述する
- CSSを編集：ここ重要です。以下のスタイルを必ず記述する必要があります
.sIFR-flash { visibility: visible !important; }
.sIFR-replaced { visibility: visible !important; }
span.sIFR-alternate
{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
overflow: hidden;
letter-spacing: 0;
}
※フォントサイズなどはスタイルシートで設定出来ます。出来上がったら、sifr.js、フォントを登録したxxx.swf、必要であれば.cssファイルをサーバーにアップロード。表示させたいページの<head>～</head>に下記のコードを記入して呼び出します。
<script src="sifr.js" type="text/javascript"></script>
<link rel="stylesheet" href="xxx.css" type="text/css" media="screen" />
日本語フォントの場合、ジェネレーターを使っての変換は不可ですが、.fla を使って変換すれば使うことが出来ました。情報量が多く非常に重いので、本文全体に反映させないほうがいいそうですが、タイトルやロゴなどには問題なく使えそうです。
sIFR 関連参照サイト：
Entries tagged ‘sIFR 3’
jQuery sIFR Plugin
Wiki.Novemberborn
Cufon
任意のフォントファイルをJavascriptファイルに変換し表示させていきます。現在のShaun Inman氏のサイトで利用されています。フォントファイルを変換するためジェネレーターもcufón – fonts for the peopleと@font-face Generatorとがあります。
DEMO：Cufon
- Cufonファイルを入手：Cufónファイル（cufon- yui.js）をダウンロード
- フォントファイルをJavaScriptに変換：ジェネレーターを使ってファイルの変換を行います。（和文フォントは文字化けしました）
- HTMLファイルの記述：表示させたいページに以下のコードを挿入
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="xxx.font.js"></script>
<script type="text/javascript">
Cufon.replace(body'); </script
<script type="text/javascript">
Cufon.now(); </script>
サーバーにアップして完了です。
一部、対応していなブラウザがあるので、@fontface を併用するとなおよろし
Cufon 関連参照サイト：
Cufonの使い方
WP-Cufon：：：WordPress 用のプラグインなんてのもありました
Typeface
Cufon と同様にフォントファイルをJavascriptファイルに変換し表示させます。Cufon より扱いが容易かもしれません。
DEMO：Typeface
- typeface.js を入手：typeface.js Javascript Library よりダウンロードできます
- フォントファイルを変換：手持ちのフォントファイルをConvert ページで変換もしくは同ページで配布されている変換済みのファイルをダウンロードします。
- HTMLの記述：表示させたいページの<head>～</head>に以下のコードを記述します
<script src="typeface-0.14.js"></script>
<script src="helvetiker_regular.typeface.js"></script>
ここで重要なのが、Javascript を実行するためのおまじない。反映させたい要素に class=”typeface-js” を設定します。あとは、スタイルシートにて反映させたい要素にfont-familyで指定すればOKです。
Typekit
こちらはサーバーにフォントファイルをアップしたり、フラッシュやJavascritpt への変換も必要なし。簡単なスクリプトで呼び出し、スタイルシートでfont-familyを指定するだけで利用可能なウェブサービスとなります。無料登録の場合、制限はありますが選べるフォントの数は少なくはないので、十分使えると思います。
DEMO：Typekit
※ Typekit への登録が必要です。
サインアップするとどのサイトに対して利用するのかを設定し、フォントを選んで生成されるコードをページ内に記述するだけでOK。
<script type="text/javascript" src="http://use.typekit.com/xxx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
これなら、レンタルブログやサーバーへのアップロード制限がある場合でも利用できますね。
Fontface
なんだかんだいって、この方法が一番使いやすいかも。ほとんどのブラウザが対応するようになったので、ローカル上のフォントを呼び出すような感覚で利用できます。ただし、アンチエイリアスがきかないので、あまり小さいサイズでの表示だとかえって見栄えがよくないです。
DEMO：Fontface
@font-face Generator で手持ちのフォントを変換もしくは同サイトで配布されている@font-faceキットをダウンロードしてdemo.htmlを編集するだけで使えます。フォントファイルも合わせてサーバーにアップロードする必要があります。
フォントいぢりは面白いのでいろいろと試してみてくださいね。
Leave a Reply