💜 👨🏿‍🚒 🗑️ Cufón-あなたの心が望むフォントを使用する 🎰 👌🏻 🚳

タスクがプロジェクトで非標準フォントを使用することである場合、いくつかの方法で進む機会があります。

b-methodは非標準フォントを使用することではなく、CSSでbody {font-family：sans-serif;}と言って自分をだますことはしないでください。
牛の方法は、HPEG、キャプション付きの写真から切り取り、より強く絞ってぼかしを表示し、テキストの代わりに写真を挿入することです。オープンスペース方式で非常に人気があります。
W3Cメソッド - @font-family

を使用し、問題なく美しいフォントをお楽しみください。この方法は、ブラウザからのサポートが弱いため、機能しているとは見なされません。
sIFRは今日最もよく使用されているクールなものですが、欠点としてFlashプラグインが必要です。これはほとんど欠点とは言えませんが、プラグインなしで実行できるツールがある場合、これは喜ばしいことです。
Cufónが大事です。優れた結果を示す比較的新しい方法。彼はこの記事のヒーローです。

好奇心が強い人のために：別の方法、kufonのほぼ完全な類似物-typefaces.jsがありますが、今日はそれについて話をしません。

どんなクーポン？

開発者がサイトで書いているように、彼らのプロジェクトの使命は、sIFRの価値ある代替になることです。sIFRは、そのメリットにもかかわらず、設定と使用がいささか複雑です。これを達成するために、次の目標が設定されました。

プラグインやshmaginsは必要ありません-ブラウザでネイティブにサポートされているツールのみが使用されます（これらのツールのうち、通常のものにはJavaScript、SVG、<canvas>が使用され、VMLはIEに使用されます）
互換性-すべての一般的なブラウザで動作するはずです。
使いやすさ-最小限の準備と構成。
速度-大量のテキストであっても、十分に大きくする必要があります。

仕組み

Cufónは2つの独立した部分で構成されます-標準フォント（形式、TTF、OTF）を、後で使用される中間形式に変換するフォントジェネレーター。 2番目の部分はJavaScriptレンダリングエンジンです。

すべてが非常に巧妙かつ思慮深く行われましたが、最終的には、このすべての機械を動作させるために、2つのJavaScriptファイルを接続するだけで、楽しむことができます。

やってみましょう

これらすべてを実際に試してみましょう。まず、フォントファイルを見てみましょう。たとえば、プレーンで太字のRokwellフォントがあります。 cufon.shoqolate.com/generateにアクセスし、フォームにあるファイルを突き出します。さらに、必要に応じて、いくつかの追加設定をメモし、ファイルを取得します。私の場合はRockwell_400-Rockwell_700.font.jsでした。この名前は、ファイルに2つのスタイルのフォントが含まれていることを示しています。 ...

次のステップは、実際の配布キットCufónをダウンロードすることです。これは圧縮形式で約14 KBかかります。 cufon.shoqolate.com/js/cufon-yui.js

最も一般的なJavaScriptとして、これらのファイルの両方をドキュメントに含めます。

  <script type = "text / javascript" src = "./ js / cufon-yui.js"> </ script>
 <script type = "text / javascript" src = "./ js / Rockwell_400-Rockwell_700.font.js"> </ script>

次に、美しいフォントで描画するページの要素を選択します。たとえば、すべてのヘッダーはH1で、問題ありません。

  <script type = "text / javascript">
     Cufon.replace（ "h1"）;
 </ script>

そして、それは私たちに必要なすべてです。描画の色、サイズ、その他のパラメーターは、CSSルールから取得されます。彼らがもちろん与えられた場合。

H1だけでなく、ある種の「ul.menu> li.active> a」も置き換えたい場合は、セレクターで選択できるサードパーティのライブラリが必要です。実際、Prototype、jQuery、MooTools、DojoなどのJavaScriptライブラリを使用しない人はほとんどいないため、作成者はライブラリを冗長化せず、サードパーティのライブラリを使用することを提案しました。正しく提供します！したがって、上記のライブラリのいずれかを使用する場合は、Cufónよりも前にそれらをドキュメントに含める必要があります。そうすれば、彼自身が何を理解し、より複雑なクエリを使用できるようになります。

IEユーザーを気にする人のための特別な注意。開発者は、</ body>の直前、またはGoogleアナリティクスなどの外部スクリプトを呼び出す前に、次のコードを挿入することをお勧めします。

 <script type="text/javascript"> Cufon.now(); </script>

<script type="text/javascript"> Cufon.now(); </script>

これにより、IEでのフォントのレンダリングの遅延がいくらか軽減されます。

複数のフォントを使用します。

 <script src="cufon-yui.js" type="text/javascript"></script> <script src="Frutiger_LT_Std_400.font.js" type="text/javascript"></script> <script src="Myriad_Pro_400.font.js" type="text/javascript"></script> <script type="text/javascript"> Cufon.replace('h1', { fontFamily: 'Frutiger LT Std' }); Cufon.replace('h2', { fontFamily: 'Myriad Pro' }); </script>

<script src="cufon-yui.js" type="text/javascript"></script> <script src="Frutiger_LT_Std_400.font.js" type="text/javascript"></script> <script src="Myriad_Pro_400.font.js" type="text/javascript"></script> <script type="text/javascript"> Cufon.replace('h1', { fontFamily: 'Frutiger LT Std' }); Cufon.replace('h2', { fontFamily: 'Myriad Pro' }); </script>

呼び出し中に追加の設定を指定しない場合、最後にロードされたフォント（ Myriad_Pro_400 ）が使用されます。

また、Cufónが使用されるすべてのページは、 UTF-8エンコーディングであるか、 US-ASCIIなどの下位互換性が必要です。あなたのページがまだCP1251にある場合 -あなたの問題。

UPD：ユーザーpgg は CP1251がサポートされていることを示しています！

微妙

レンダリングを呼び出すときに、テキストに追加の視覚設定を指定する場合は、次のようにします。

 Cufon.replace("ul.menu li.active a", {color:'#000000'});

Cufon.replace("ul.menu li.active a", {color:'#000000'});

これは、たとえば次の場合に必要になることがあります。

Cufon.replace("ul.menu li a"); 
      

        
        
        
      

     Cufon.replace("ul.menu li.active a", {color:'#000000'});

最初のレンダラーを呼び出すと、CufónはCSSルールに従ってメニュー内のすべてのリンクの色を正しく決定しますが、リンクの1つが白い背景に白で表示される可能性があるため、さらに進んで違いがあるかどうかはわかりません。この状況を修正するために、2番目のレンダラーも呼び出されます。

このようにして、色だけでなく、テキストに関連する実質的にすべてのCSSプロパティも規定できます。さらに、テキストをグラデーションで塗りつぶすことも可能ですが、なぜ必要なのかは明確ではありませんが、本当に必要なのは、マニュアルページを参照してください。 wiki.github.com/sorccu/cufon/styling

また、レンダラーが呼び出されたときにのみフォントの置き換えが発生する瞬間にも注意を払う必要があります。

 Cufon.replace("h1.alala");

Cufon.replace("h1.alala");

後でスクリプトを使用してalalaクラスを別のh1に割り当てると、すべてのh1要素がalalaクラスに置き換えられ、テキストはそこで置き換えられません！そのため、操作後にレンダラーを呼び出すことを忘れないでください。

例

それは：

次のようになりました：

参照資料

Githubプロジェクトページ

CSS視覚化ドキュメント

フォントファイルジェネレーター

元のYed-Priorブログ記事

Cufón-あなたの心が望むフォントを使用する

どんなクーポン？

仕組み

やってみましょう

複数のフォントを使用します。

微妙

例

参照資料

More articles: