外部記憶

最近物忘れが激しくて・・・。PC、Web関係、読んだ本、その他モロモロのメモ代わり。

TypeKit でテキストフォントをいじってみる

| 0件のコメント




以前「TypeKitから始まるウェブ文字革命 : could」で読んで、面白そうだと思ったプロジェクト。

Typekit

Web サイト上で、クライアント側の環境に依存せずに任意のフォントを使えるようにする工夫は、CSS + JavaScript などで画像置換とか sIFR とかいろいろあるようだけど(この頃あまり追っかけてないので、最近の様子はどうなってるか実はよく分かってない)、こちらは比較的簡単に利用できそうなのでちょっと気になっていた。

上の記事を見たときには、まだ確かアナウンスのみだったので、とりあえず申し込みをしてみたのだけれど、先ほどメールの整理をしていたら「使えるようになったよ」というお知らせを見逃していたことに気付いた。

で、さっそく無料のトライアルバージョン(利用できるフォントが1サイトに付き2種類のみ。またウィンドウ右下に Typekit へのリンクが表示される。有料プランだとフォント5種類で $24.99/年、無制限で $49.99/年のいずれかとなる)で試してみた例が↓これ。

External Memory

External Memory

画像で置き換えているわけではないので、テキストとして文字単位で選択、コピーなどもできる。

必要な作業としては、

  • 上記サイトへのユーザー登録時に指定される(後からでも参照可) JavaScript のコードを追加。
  • 上記サイト内で適当なフォントを選択。
    Typekit
  • 下のような typekitEditor で、そのフォントを適用するセレクター( class や id など。セレクター名は任意に付けられる)を指定して「 Publish 」。
    Gaibukioku - Typekit
  • で、後はそのセレクタを使ってテキストを記述すればOK。

上の例だとこんな具合(1番目のフォントでは文字間を調整している)。

<p id="carbon-type" style="font-size: 40px; letter-spacing:
 -5px" >
External Memory
</p>
<p id="learning-curve" style="font-size: 40px;" >
External Memory
</p>

日本語未対応なのは仕方ない(よね、データ量を考えれば)とはいえ、Safari や Firefox が対応し始めた CSS3 のウェブフォント(Webfonts)なんかも普及してくるだろうから、Flash や Silverlight などに限らない Web のデザイン関係もなかなか楽しくなってきそう。

Similar Posts:


PDF