優れたsIFR3およびFLIRライブラリを知っています。これらのライブラリは、オンザフライでWebページ上の任意のフォントを使用するのに役立ちます。

確かに、私の観点から、それらの使用（つまり、インストールと構成）は簡単な作業とは見なされません。

今日は、Typeface.jsライブラリについて説明します。このライブラリは、その名前が示すとおり、純粋なJavaScriptで実行されます。

理論のビット

Typeface.jsライブラリの公式Webサイトはhttp://typeface.neocracy.org/です。このリソースには、すべての追加情報があります。

仕組み

このライブラリは、ベクターグラフィックスをレンダリングするための組み込みブラウザ機能に基づいています。かなり長い間、ブラウザーはベクターグラフィックスのレンダリングをサポートしており、FirefoxはキャンバスとSVGオブジェクトをサポートしており、IEはVMLをサポートしています。開発者David Chesterが主張するブラウザーサポート：Firefox 1.5以降、Safari 2 +、Internet Explorer 6以降。

このライブラリは、2つのコンポーネントで構成されています。truetypeフォントをベクター座標に変換するperlモジュールと、ベクターフォントの説明を使用してブラウザーでテキストをレンダリングするjavascriptファイルです。

メリット

最も重要なことは、フラッシュの欠如です。すべてがブラウザの組み込み機能で動作します（最新バージョンでも動作しません）。
迅速かつ簡単なインストール。より高度なsIFRおよびFLIRの複雑さを理解する必要はありません。
テキストは「テキスト」として表示され、選択、コピーなどが可能です。検索エンジンはすべてをテキストのように扱います。確かに、キャンバスをサポートするブラウザでのみテキストを選択できます。
CSS2のすべてのテキストプロパティのサポート。（フォントサイズ、レタースペース、フォントストレッチ、フォントの太さ、行の高さなど）

例

準備する

ライブラリをダウンロードして、サーバーのフォルダー/ js /に入力します
次に、「Convert a Font」を使用して目的のTrueTypeフォントを変換するか、自分でperlモジュールをダウンロードする必要があります。
生成された.jsファイルをライブラリのあるフォルダーに配置します。

プロセス

ドキュメントの<head>に、
<script type= "text/javascript" src= "js/typeface-0.11.js" ></script> <script type= "text/javascript" src= "js/moj-font.typeface.js" ></script>

、 moj-fontは、変換の結果として受け取ったドキュメントです。
重要！ライブラリをロードする前に、すべてのcssファイルをロードする必要があります。これは非常に重要です。そうでない場合、結果はありません。
選択したフォントをテキストに割り当てる必要があるレイヤーのドキュメントの<body>で、クラスtypeface-jsを設定します。

<div class = "myclass typeface-js" style= "font-family: ALSAgrus; font-size:40px;" > . </div>
スタイルは、style属性とcssの両方で設定できます。 Font-familyは、ライブラリとともにロードされるフォントの名前でなければなりません。参照用に、正しい名前は、変換されたjsファイルの下部にベクターフォント表示で表示できます。

これで、ブラウザにページをロードして結果を見ることができます！

そして、このようなページ全体の例を次に示します。

blockquote>

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html > < head > < title > </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < script type ="text/javascript" src ="js/typeface-0.11.js" ></ script > <script type= "text/javascript" src= "js/als_agrus__regular.typeface.js" > </ script > </ head > < body > < div class ="myclass typeface-js" style ="font-family: ALSAgrus; font-size:40px;" > . </ div > < div > , < br /> Typeface.js ALS Agrus </ div > </ body > </ html >

たとえば、有料のALS Agrusフォントを使用して、より複雑なフォントで結果を確認します。私が得たものは、上の写真で見ることができます。

Javascriptで任意のフォントを使用します。

理論のビット

仕組み

メリット

例

準備する

プロセス

More articles: