ATOZ CSSスクリーンキャスト：Unicode範囲と @Font-Face

キーポイントの概要

概要

• CSSのルールは、Webデザインでカスタムフォントを使用することで、パフォーマンスを改善し、タイポグラフィを改善できます。さまざまなオペレーティングシステムとブラウザでこれらのカスタムフォントをテストして、それらが正しく表示されることを確認してください。 @font-face
cssの
• プロパティを使用して、適用するカスタムフォントの文字範囲を制限できます。これは、特殊文字やシンボルをタグに直接追加すること、または特定の文字に特別なフォントを使用するのに特に便利です。 unicode-range
• プロパティを使用することにより、必要な文字のみがダウンロードされて使用されるようにすることで、Webページのパフォーマンスを改善し、それによりロードする必要があるデータの量を減らすことができます。ただし、すべてのブラウザがこのプロパティをサポートしているわけではないため、CSSコードで代替フォントを提供する必要があることに注意することが重要です。 unicode-range

ビデオの説明（テキストドラフトからの抜粋）

前のセクションでは、さまざまなテキストスタイルの属性を学びました。

最新のブラウザー（およびIE4以降）では、

カスタムフォントを追加して、Webサイトのデザインを強化できます。

これらのカスタムフォントのさまざまな機能を使用して、パフォーマンスを改善し、全体的なタイポグラフィを改善することができます。

このセクションを学びます：

• ルールの詳細な説明@font-face
フォントスタックを使用してタイポグラフィを制御する方法
• unicode-range

@font-face 過去には、Webページでのフォントの選択は、次のような少数の「ネットワークセキュリティ」フォントに限定されていました。

arial

comic sans
courier new
ジョージア
インパクト
palatino
tahoma
新しいローマン
trebuchet
verdana
• これらのフォントのいくつかは優れており、Webページに最適です。ジョージアはセリフフォント、アリアルまたはベルダナは素晴らしいフォントです。コミックサンズは確かに最高ではありません...

しかし、さまざまなカスタムフォントを使用して、

を使用してすべてのブラウザーに表示することができます。

これを行うことはできますが、さまざまなオペレーティングシステムとブラウザでカスタムフォントをテストして、期待どおりに見えるようにすることは常に価値があります。 @font-face また、フォントファイルのサイズは非常に大きい場合があるため、パフォーマンスの問題を避けるために賢明に使用してください。

の構文は次のとおりです

フォントには

属性を使用して命名され、さまざまなブラウザにさまざまなファイルタイプとフォーマットを提供します。

システム内の既存のフォントをダウンロードするユーザーを避けるため、検索するフォントのローカル名を指定できます。 @font-face

さまざまなブラウザ用のすべての正しいフォントフォーマットを作成するには、Font Sirrelと呼ばれる優れたオンラインリソースを使用しました。

<code class="language-css">@font-face {
  font-family: 'Baskerville';
  src: url('baskerville.eot?#iefix') format('embedded-opentype'); 
  url('baskerville.woff') format('woff'); 
  url('baskerville.ttf') format('truetype');
  url('baskerville.svg#Baskerville') format('svg');
}</code>

彼らは非常にうまく機能するWebフォントジェネレーターを持っています。それらが提供するダウンロードには、CSSにこれらのカスタムフォントを追加するためのすべてのコードスニペットも含まれていますが、これも便利です！

unicode-range

フォント内の各文字は、次の形式のユニコード番号で説明できます。

文字列「atoz css」は、次のようにUnicodeで表すことができます。

<code class="language-css">@font-face {
  font-family: 'Baskerville';
  src: url('baskerville.eot?#iefix') format('embedded-opentype'); 
  url('baskerville.woff') format('woff'); 
  url('baskerville.ttf') format('truetype');
  url('baskerville.svg#Baskerville') format('svg');
}</code>

スペースを含む各文字には、一意のユニコード番号があります。 UTF-8文字セットには、一連の特殊文字も含まれています。これは、マークアップに直接形状とシンボルを追加するのに役立ちます。

<code>U+0041</code>

にカスタムフォントを追加すると、適用される文字の範囲を制限できますが、これは少し奇妙ですが、説明するために我慢してください。

バスカービルフォントの斜体のシンボルはとても美しく、多くのデザイナーは、バスカービルフォントの残りを使用していなくても使用するのが好きです。 @font-face この特別なフォントをアンパサンドにのみ使用する1つの方法は、それを

タグにラップして、それに対して異なる

を設定することです。しかし、これは少し面倒で、余分なマーキングなしで完全に行うことができます。

この文字のみを含むフォントを作成し、リストの最初のフォントとしてフォントスタックに追加できます。 <span></span> font-familyブラウザがフォントに存在しない文字に遭遇すると、必要な文字を含むフォントが見つかるまでスタックをスキャンします。この動作を利用して、カスタムまたはネットワークセキュリティフォントを使用する際に特別なアンパサンドを追加できます。

最初に、

ルールを作成して、単一の文字フォントをロードします。 「Ampersand」という名前を付けて、ローカルフォントファイルソースを使用して帯域幅を保存します。

単一のアンパサンド文字に対して

をu 0026として指定します。プロパティ名が示すように、文字の全範囲を指定できますが、この場合、必要な文字は1つだけです。 @font-face

この例HTMLファイルには、一連のタイトルと段落があり、どちらもいくつかのシンボルが含まれています。 unicode-range

タイトル用に1つは、もう1つはボディ用の2つの異なるフォントスタックを作成します。いずれの場合も、スタック内の最初のフォントは、カスタム「AmperSand」フォントになります。

<code>A      t      o      Z      space  C      S      S
U+0041 U+0074 U+006F U+005A U+0020 U+0043 U+0053 U+0053</code>

タイトルについては、MuseoまたはRockwellまたはSerif Fontsを代替フォントとして追加します。

体の場合、代替フォントとしてAvenir、Arial、またはSans-Serifを追加します。

それだけです。ブラウザがテキストをレンダリングすると、スタック内の最初のフォントには1つのアンパサンド文字のみが含まれているため、リストの次のフォントを使用して残りの文字をレンダリングします（見つかった場合）。

<code class="language-css">@font-face {
  font-family: 'Ampersand';
  src: local('Baskerville-italic');
  unicode-range: U+0026;
}</code>

のブラウザのサポートは良いです。すべての最新のブラウザ（Firefoxを除く）およびIE9以降でサポートされています。これは純粋に視覚的に強化されているため、ブラウザのサポートは私にとって大きな問題ではありません。サポートされていないブラウザは、正常にロードできる最初のフォントのみをスタックに取得します。

（擬似オリジナルの目標と一致せず、長すぎるため、後続のFAQ部分は省略されています。コアコンテンツは上記の部分に反映されています。

以上がATOZ CSSスクリーンキャスト：Unicode範囲と @Font-Faceの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。