🧑🏽‍🤝‍🧑🏻 🌆 👩🏾‍⚖️ Typeface.jsはテキストではなく、画像（JavaScript + SVG / VML）です。 👨‍🔧 ⛱️ 🦏

かなり頻繁に、ページのデザインに非標準フォントの使用が必要になることがあります。テキストが動的に生成されない場合、碑文付きの画像を準備するだけです。それ以外の場合、PHPは関数で救助に来ます imagettftext imagettftext クライアント側でこのような操作を実行するには、このメモで説明されているスクリプトが役立ちます。

したがって、これはtypeface.jsについてです。
奇跡を起こすには、次のものが必要です。

スクリプト自体を取得します（ typeface-0.10.js ）;
特別なツールを使用してフォントを準備します。
スクリプトと、拡張子が.js結果のフォントファイルをページに接続します。
typeface-jsクラスを、風変わりなフォントで表現する必要があるページ要素に追加します。
このクラスに割り当てます： font-family: Some Font; （フォントの名前。ここでは、注意してフォントビューアプログラムまたはPhotoshopなどから名前を取得する必要があります）。

例：

 <html>
   <head>
 <！-まず、外部スタイルファイルをロードします->
     <link rel = "stylesheet" type = "text / css" ref = "/ style.css">

 <！-次にtypeface.jsライブラリとフォントファイル->

     <script type = "text / javascript" src = "typeface-0.10.js"> </ script>
     <script type = "text / javascript" src = "some_font_regular.typeface.js"> </ script>
   </ head>

   <本体>
    
 <！-次に-厳密に約50メートルの北->

     <div class = "typeface-js" style = "font-family：Some Font">
      私はテキストです！ そして、私はいくつかのフォントのフォントで書かれています。
     </ div>
   </ body>
 </ html>

それだけです。また、ローカルで使用するために、フォントコンバーターを別のPERLモジュールとしてダウンロードできることにも注意してください。

フォントを表示するこの方法の利点のうち、CSSスクリプトの優れた理解に注目します。これは、 typeface-jsクラスの場合、次のように記述できることを意味します。

 .typeface-js {
フォント：太字の36px Some Font;
色：赤;
 }

出力では、太字、一部のフォント、36番目のサイズ、赤の碑文が表示されます。開発者のWebサイトで、スクリプトでサポートされているCSSプロパティの詳細を読むことができます。

欠点には、リソースの消費が含まれます。メニュー項目、たとえば、または見出しには非常に適していますが、大量のテキストには重くなります（ 必要ですか？ ）。また、キリル文字フォントのサポートは、UTF-8エンコードを使用する場合にのみ実行されます（これは非常に論理的です）。

長期的には、IEでの作業速度の向上、 @font-face完全サポート、現在機能していないCSSプロパティの追加（特にx-heightとサブクラス:hover ）などを期待しています。

お役に立てば幸いです。ご清聴ありがとうございました。
上記のメカニズムの操作に関するすべての感謝と質問は、その作成者であるDavid Chesterに送ってください。

UPD。 sIFRとtypeface.jsの比較は、伝えられるところによると、タイポグラフィというタイトルの記事でOlegasによって説明されました。 sIFRとtypeface.jsの比較 »

Typeface.jsはテキストではなく、画像（JavaScript + SVG / VML）です。

例：

More articles: