カテゴリー別アーカイブ: CSS3

「TTF」からWEBフォント「EOT」「WOFF」「SVG」へ変換する方法


Web font collection / Impress PC

多くの場合、フォントは「TTF(TrueType Font)」で作成・配布されているでしょう。

この「TTF」さえあれば、WEBフォント「EOT」「WOFF」「SVG」へ変換することが可能です。

以下の無料のWEBサービスが、一括で変換できるので、とても便利です。

Create Your Own @font-face Kits | Font Squirrel
http://www.fontsquirrel.com/tools/webfont-generator

続きを読む

CSSでWEBフォントを適用する方法


Web font collection / Impress PC

CSS3で新たに登場した「@font-face」規則によって、WEBページ上のテキストに対してどんなフォントでも適用できる「WEBフォント」という仕組みが利用できるようになりました。

これまでは、実行環境(個々人のパソコンやスマホ)に搭載されたフォントの範囲(MS Pゴシックなど)でしかテキストを表現することができませんでしたが、今や、フォントさえ手元にあれば、テキストも含めたWEBデザインを実現することが可能となっています。

しかし、このWEBフォント、ブラウザによって対応しているWEBフォント形式がバラバラであるという問題があります。主要ブラウザの全てに適用しようと思ったら、主要ブラウザの全てを網羅するだけのWEBフォントを用意しなければなりません。

続きを読む

主要ブラウザ別の「WEBフォント形式」対応表


Web font collection / Impress PC

WEBフォントとして「TTF(TrueType Font)形式」をそのまま使えるブラウザも存在しますが、「TTF形式」をサポートせず、「WEBフォント専用の形式」を求めるブラウザも多く存在します。

最新ブラウザのほとんどは「WOFF(Web Open Font Format)形式」に対応してきており、WEBフォント専用の形式は、今後、「WOFF形式」に統一されていく動きにあります。

ということは、少し前のブラウザでは、その対応形式はバラバラだったということです。

WEBフォントを利用する上で、各ブラウザのWEBフォント形式の対応状況は知っておく必要がありますので、以下に、主要ブラウザ別のWEBフォント形式対応表を掲載しておきます。

続きを読む