はじめてのWebfonts
今までは、サイト上で意図したフォントを使うには
PCに共通してインストールしてあるデバイスフォンを指定するか、
photoshopなどで画像として作る方法が主でした。
しかしCSS3からはwebfonts機能が搭載されたので、
CSSのみで希望のフォントが使える様になりました。
まだ一般化するには時間がかかると思いますが、
webfontsの基本をまとめてみました。
- webfontsのメリット・デメリット
- webfontsで使えるフォントフォーマット
- Webfontの使い方 CSSの@font-faceを使う方法
- Webfontsの使い方 Webfontサービスを利用する方法
- Webfontサービス
webfontsのメリット・デメリット
CSSのみで希望のフォントを指定できるので、
非常にメリットが大きく思えますが、
まだまだ幾つかの問題もあります。
メリット | デメリット |
---|---|
|
|
webfontsで使えるフォントフォーマット
TTF(TrueType) /OTF(OpenType)
デスクトップアプリケーションで使われているフォーマット。
最も手軽に導入できますが、フォント制作者が生のデータをサーバーに上げることに難色を示したので、
WOFFにその座を明け渡すことになりそうです。
Firefox3.5〜、Safari3〜が対応。
EOT (Embedded OpynType)
Microsoftがwebfonts向けに提唱。
Microsoftが提供している専用コンバートツール「Web Embedding Fonts Tool (WEFT)」で、
EOTファイルを作成することができます。
IE4〜対応。IE4以外のブラウザは非対応。
WOFF(Web Open Font Format)
今後のwebfontsの標準フォーマットになることが確定しています。
圧縮されているためデータが軽い。
基本的にwebサイトでのみ利用でき、デスクトップアプリケーションでは利用できないとして
ライセンスを分離している。
Firefox3.6〜、Chrome、Opera、IEも9から対応。
SVG Fonts
SVG(XMLベースのベクターグラフィックス言語)のフォント版。
iPhoneやiPadのSafariはTTFやOTFには非対応ですが、
唯一SVGには対応しています。
※iOS 4.2にてTTF形式に対応しました。
番外 JavascriptやFlashと組み合わせた方法
フォントファイルをjavascriptに変換し、テキストを任意のフォントで置き換えるCufon、
HTMLのテキストをjavascriptでflashデータに置き換えるsIFRなどもあります。
javascriptやFlashと組み合わせることで、
フォントフォーマットに左右されずにフォントを指定する方法もあります。
詳しくは下記のサイトが参考になります。
ウェブで任意の書体を使う方法まとめ【更新】 – フォントブログ
Webfontの使い方 CSSの@font-faceを使う方法
webfontsを利用するには@font-faceを使います。
@font-faceで任意のフォント名を作成し、
そのフォントを使いたい箇所のセレクタの属性で指定します。
@font-face{ font-family:'VitaminRegular'; /*任意のフォント名*/ src:url('VITAMIN_-webfont.woff') fromat('woff'); /*フォントファイルへのパス、フォーマット*/ } #test{ font-family: VitaminRegular; /*先ほどのフォント名*/ }
前述の通りブラウザによって使えるフォントフォーマットが異なりますので、
クロスブラウザに対応する場合は以下の様に書きます。
@font-face { font-family:'VitaminRegular'; src: url('VITAMIN_-webfont.eot?iefix') format('eot'),/*ie6-8*/ url('VITAMIN_-webfont.woff') format('woff'), /*Firefox,Chrome,Opera,IE9*/ url('VITAMIN_-webfont.ttf') format('truetype'), /*safari*/ url('VITAMIN_-webfont.svg#webfontBW5C59cp') format('svg'); /*iphone/iPad*/ }
font-faceで使えるfontを紹介しているサイト
Web Fonts. Delivered ∗ Kernest
Font Squirrel | Download Hundreds of Free @font-face Fonts
WebFonts として利用できるフリーの和文フォント | ヨモツネット
Webfontsの使い方 Webfontサービスを利用する方法
フォントデータからユーザーのアカウントまで1つのサーバーで管理するサービスです。
このサービスを利用することで、ブラウザ別の指定やライセンスの確認など煩雑な作業をする手間が省けます。
下記の様な流れが多いです。
Webfontサービスに登録
→使用するフォントを選択
→発行されるjavascriptとcssを使用したいサイトに設定する
Webfontサービス
40以上の言語に対応してます。
利用方法は下記のサイトで詳しく紹介されてます。
ついにウェブでも有名書体が使える!Webフォントサービス Fonts.com Web Fonts β版が運用開始 – フォントブログ
Adobeのfontも配布されてます。
twitter、New York Times、GIZMODO、WordPressでも採用実績があります。
使い方は下記のサイトが参考になります。
TypeKitで文字の表現が変わる!!フォント・クラウドの時代/Design/Webdesign – サイブリッジラボ
googleのWebfontサービス。
下記の記事が参考になります。
Google Font APIを試してみた。 – E-riverstyle Vanguard | CSSやXHTML,Javascriptやweb製作に関する事を紹介
Fontdeck webfonts: Real fonts for your website
有料ですが、プレビューフォントは無料なので自サイトに入れて
どのように変わるのか確認できます。
そうして納得のいったものだけ購入できます。
javascript不要のタイプです。
有料ですが、30日間のフリートライアルがあります。
Web Fonts in ActionではサイトのURLを入力すると指定したフォントに置き換えてでのプレビューが見れます。
デコもじ|ウェブフォントで、ホームページが、ブログが、もっと楽しくなる♪
貴重な日本語のWebfontです。
Comment
コメント(0)
コメントする
Trackback(1)
画像を使わないでフォントをユニークに! | KRUZ-GRAPHIX