css3 Web フォント note_html/css_WEB-ITnose

css3 web font

@font-face 構文

@font-face はサーバーサイドのフォントを読み込むことができ、クライアントのブラウザーがクライアントにインストールされていないフォントを表示できるようにします。

@font-face{	font-family:<YourWebFontName>;	src:<source> [<format>] [,<source> [<format>]] *;	[font-weight:<weight>];	[font-style:<style>];}

: カスタム フォント名を指定します。Web 要素の font-family を参照する、ダウンロードしたデフォルトのフォント ファイル名を使用するのが最善です。
: カスタム フォントの保存パスを指定します。相対パスまたは絶対パスを指定できます。
: カスタム フォント形式を指定します。これは主にブラウザが識別できるようにするために使用されます。その値には主に、trutype、opentype、truetype-att、embedded-opentype、avg などのタイプが含まれます。 。
: 前者はフォントが太字かどうかを指定するために使用され、後者は主にフォント スタイルを定義します。これら 2 つの属性に加えて、同様の属性には、font-variant、font-size などが含まれます。

@font-face

の実装

@font-face カスタムフォントを正常に使用するには、以下の重要な点を満たす必要があります。

1. さまざまな形式のフォントをサーバーにアップロードして、さまざまなブラウザをサポートします。
   

2. @font-face に指定したカスタムフォント名
   nameと適用したカスタムフォントのフォントソースを表示します。

   @font-face {	font-family:'SingleMaltaRegular';	src: url('../fonts/singlemalta-webfont.eot');	src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'),		 url('../fonts/singlemalta-webfont.woff') format('woff'),		 url('../fonts/singlemalta-webfont.ttf') format('truetype'),		 url('../fonts/singlemalta-webfont.svg#SingleMaltaRegular') format('svg');}

コードブロック内のfont-familyとsrcの両方が必要です。Font-familyはフォントのカスタマイズに使用され、srcはカスタムフォントのソースです。
@font-face ルールの font-family は、スタイルの font-family とは少し異なります。 @font-face の font-family はフォントの名前を宣言するだけで、このフォントを要素に割り当てません。スタイル内のフォントファミリーは、要素のフォント名を明示的に指定します。
@font-face ルールでは、font-family を通じてフォント名をカスタマイズします。この名前は、要素スタイルの font-family 属性によって参照するためにのみ使用されます。
上記のコードは @font-face を通じてフォント名「SingleMalta Regular」を宣言していますが、実際には何の効果もありません。Web フォントのテキスト フォントを SingleMalta Regular にしたい場合は、対応する要素で @font を参照する必要があります。スタイル コード ブロック内で -face によって定義されるフォント (例:

h2{font-family:"SingleMaltaRegular";}

) ブラウザーごとに互換性の問題があるため、フォント形式のサポートもブラウザーのバージョンごとに異なります。

1. TureTpe (.ttf) 形式:

   .ttf フォントは Windows および Mac で最も一般的なフォントです。RAW 形式であるため、このフォントをサポートするブラウザは [IE9+] です。 Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile Safari4.2+];

2. OpenType (.otf) 形式:

.otf フォントは、に組み込まれているオリジナルのフォント形式とみなされます。 TrueType をサポートするブラウザには、[Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile Safari4.2+] ；

1. Web Openフォント形式 (.woff) 形式:

   .woff フォントは、オープンな TrueType/OpenType 圧縮バージョンであり、このフォントのサポート ブラウザーには [IE9+、Firefox3. 5+、Chrome6+、Safari3.6+、Opera11.1+];

2. Embedded Open Type (.eot) 形式:

   .eot フォントは IE 用の特別なフォントであり、この形式のフォントは TrueType から作成できます。このフォントをサポートするブラウザは [IE4+] です。

3. SVG (.svg) 形式:

   .svg フォントは、これをサポートする SVG フォント レンダリングに基づく形式です。 フォント ブラウザには [Chrome4+、Safari3.1+] が含まれます。 、Opera10.0以降、iOSモバイルSafari3.2以降]。

これは、@font-face では少なくとも 2 つの形式のフォント、.woff と .eot、さらには .svg やその他のフォントがより多くのブラウジング バージョンをサポートする必要があることを意味します。