CSS3-Webフォント

Webフォントは、ローカルシステムにインストールされていないCSSのフォントを許可するために使用されます。

さまざまなWebフォント形式

シニア番号	フォントと説明
1	TrueType Fonts (TTF) TrueTypeは、1980年代後半にAppleとMicrosoftによって開発されたアウトラインフォント標準であり、WindowsとMACオペレーティングシステムの両方で最も一般的なフォントになりました。
2	OpenType Fonts (OTF) OpenTypeは、スケーラブルなコンピューターフォントの形式であり、Microsoftによって開発されました。
3	The Web Open Font Format (WOFF) WOFFは、Webページの開発に使用され、2009年に開発されました。現在はW3C勧告で使用されています。
4	SVG Fonts/Shapes SVGは、SVGドキュメント内でSVGフォントを許可します。fontfaceプロパティを使用してCSSをSVGに適用することもできます。
5	Embedded OpenType Fonts (EOT) EOTはWebページの開発に使用され、Webページに埋め込まれているため、サードパーティのフォントを許可する必要はありません。

次のコードは、フォントフェースのサンプルコードを示しています-

<html>
   <head>
      <style>
         @font-face {
            font-family: myFirstFont;
            src: url(/css/font/SansationLight.woff);
         }
         div {
            font-family: myFirstFont;
         }
      </Style>
   </head>
   
   <body>
      <div>This is the example of font face with CSS3.</div>
      <p><b>Original Text :</b>This is the example of font face with CSS3.</p>
   </body>
</html>

次の結果が得られます-

フォントの説明

次のリストには、@ font-faceルールに配置されているすべてのフォントの説明が含まれています-

シニア番号	値と説明
1	font-family フォントの名前を定義するために使用されます
2	src URLを定義するために使用されます
3	font-stretch フォントをどのように伸ばすかを見つけるために使用されます
4	font-style フォントスタイルを定義するために使用されます
5	font-weight フォントの太さ（太字）を定義するために使用されます