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

フォントの太さ(太字)を定義するために使用されます