CSS3 - 网页字体

Web 字体用于允许 CSS 中未安装在本地系统上的字体。

不同的网络字体格式

先生。 字体和描述
1

TrueType 字体 (TTF)

TrueType 是 Apple 和 Microsoft 在 20 世纪 80 年代末开发的轮廓字体标准，它成为 Windows 和 MAC 操作系统最常见的字体。
2

OpenType 字体 (OTF)

OpenType 是一种可缩放计算机字体格式，由 Microsoft 开发
3

网络开放字体格式 (WOFF)

WOFF用于开发网页，于2009年开发，目前已被W3C推荐使用。
4

SVG 字体/形状

SVG 允许在 SVG 文档中使用 SVG 字体。我们还可以将 CSS 应用于带有 fontface 属性的 SVG。
5

嵌入式 OpenType 字体 (EOT)

EOT 用于开发网页，并且已嵌入网页中，因此无需允许第 3 方字体

以下代码显示了字体的示例代码 -

现场演示 
<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

字体系列

用于定义字体名称
2

源代码

用于定义 URL
3

字体拉伸

用于查找字体应如何拉伸
4

字体样式

用于定义字体样式
5

字体粗细

用于定义字体粗细（粗体）