タグ別アーカイブ: WEBフォント

「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フォント形式対応表を掲載しておきます。

続きを読む

ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンにステータスウィンドウ(状態表示枠)を表示する

enchant.js
enchant.js / Ubiquitous Entertainment Inc.

 戦闘中、ドラクエにしてもFFにしても、プレイヤーキャラの現在のHPやMPが画面上に表示されていると思う。それをステータスウィンドウ(状態表示枠)と呼んで、今回は、このステータスウィンドウ(状態表示枠)を表示してみることにする。

続きを読む