CSS - 网页字体

网站上使用的但用户设备上未默认安装的字体称为网页字体。CSS允许指定可在网上获取的字体文件，以便在访问您的网站时轻松下载。

CSS 网页字体 - 字体格式类型

下面解释了不同类型的字体格式

TrueType 字体 (TTF)：TrueType 字体是由 Apple 开发的轮廓字体。它是 MacOS 和 Windows 操作系统中最常见的字体格式。
OpenType 字体 (OTF)：OpenType 字体源自 TrueType 字体格式的基本结构，但增加了许多额外的复杂数据结构。它提供了更多排版控制。
Web Open Font Format (WOFF)：顾名思义，它是由 Mozilla 开发的一种开放式网页字体。它使用 TrueType、OpenType 和 Open Font Format 使用的结构的压缩版本，以及元数据和专用数据结构的其他信息。
Web Open Font Format2 (WOFF2)：它是 Web Open Font Format 的第二个版本。表示为woff2。这种字体比 woff 具有更好的压缩算法。
SVG 字体/形状：SVG 字体是 OpenType 字体格式的新版本。此格式允许以多种颜色、不同的透明度甚至动画显示字符。
嵌入式 Open Type 字体 (EOT)：这些是微软设计的 OpenType 字体的紧凑形式，用作网页上的嵌入式字体。它们仅受 Microsoft Internet Explorer 支持。

CSS 网页字体 - 关键点

以下部分指定了与网页字体相关的几个重要点

网页上的字体通常不是免费的。您需要付费使用它们，或者遵循许可条件，例如在您的代码或网站上给予字体创建者署名。窃取这些字体或未经适当署名使用是不道德的。
Web Open Font Format 版本 1 和 2 (WOFF 和 WOFF2) 受大多数浏览器支持，即使是旧版本。
WOFF2 文件格式完全支持 TrueType 和 OpenType 规范，包括可变字体、彩色字体和字体集合。
字体文件的列出顺序很重要。浏览器会从提供的多个字体文件列表中选择它能够使用的第一个字体文件。因此，您应该首先列出首选格式。当浏览器不理解某种格式时，它会回退到下一个格式。
使用旧版浏览器时，您应提供 EOT（嵌入式 Open Type）、TTF（True Type 字体）和 SVG 网页字体供下载。

CSS 网页字体 - @font-face @规则

使用@font-face CSS @规则，可以为网站指定未安装在用户设备上的字体。@font-face @规则有很多描述符来识别和描述字体。请参考以下代码块以了解 @font-face @规则的语法

@font-face {
   font-family: "Sansation Light Font";
   src: url("font/SansationLight.woff") format("woff");
   font-weight: normal;
   font-style: normal;
}

以上语法列出了以下属性

font-family：指定您用来引用字体的名称。名称可以是您想要的任何名称，但您应该在 CSS 代码中始终如一地使用此名称。
src：通过url()指定要导入到 CSS 中的字体文件的路径，并通过可选的format指定字体文件的格式。指定format非常有用，因为它允许浏览器确定需要使用的字体。可以使用逗号分隔值进行多个声明。
font-weight：指定字体的粗细（或粗体）。接受两个值以指定字体支持的范围，例如 font-weight: 100 400;
font-style：指定字体的样式应为其字体系列中的普通、斜体或倾斜样式。

注意：在较新的浏览器中，还可以为网页字体指定诸如font-variant和font-stretch之类的值，以及unicode-range。当仅当页面包含此范围内指定的字符时才下载字体时，此范围非常有用，从而避免不必要的下载。

让我们来看一个应用 @font-face @规则的例子

<html>
<head> 
<style>
   @font-face {
      font-family: "Sansation Light Font";
      src: url("font/SansationLight.woff");
   }
   body {
      font-family: "Sansation Light Font", serif;
   }
</style>
</head>
<body>
   <h2>@font-face at-rule</h2>
   <p>This is SansationLight Font.</p>
</body>
</html>

CSS 网页字体 - @font-face / font-stretch

以下示例演示了使用@font-face @规则中使用的百分比范围50% 和 200%设置字体样式的拉伸值

<html>
<head> 
<style>
   @font-face {
      src: local("monospace");
      font-family: "f1";
      font-style: normal;
      font-stretch: 50% 200%;
   }

   .container {
      font: 2rem "f1", sans-serif;
   }

   .font-condensed {
      font-stretch: 50%;
   }

   .font-normal {
      font-stretch: 100%;
   }

   .font-ultra-expanded {
      font-stretch: 200%;
   }

   .font-semi-condensed {
      font-stretch: semi-condensed;
   }

   .font-extra-condensed {
      font-stretch: extra-condensed;
   }

   .font-ultra-condensed {
      font-stretch: ultra-condensed;
   }

   .font-semi-expanded {
      font-stretch: semi-expanded;
   }

   .font-extra-expanded {
      font-stretch: extra-expanded;
   }
</style>
</head>
<body>
   <div class="container">
      <p class="font-condensed">ultra-condensed (50%)</p>
      <p class="font-normal">normal (100%)</p>
      <p class="font-expanded">ultra-expanded (200%)</p>
      <p class="font-semi-condensed">semi-condensed</p>
      <p class="font-ultra-condensed">ultra-condensed</p>
      <p class="font-semi-expanded">semi-expanded</p>
      <p class="font-extra-expanded">extra-expanded</p>
      </div>
</body>
</html>

以上示例显示了@font-face @规则及其描述符（如font-family、src、font-style和font-stretch）的声明。

CSS 网页字体 - 在线字体服务

大多数在线字体服务都是基于订阅的，通常存储和提供您可以使用的字体。Google Fonts是一项免费且易于使用的服务。请参考以下步骤使用 Google Fonts

访问Google Fonts。
搜索您想要的字体，或使用提供的筛选器查找您选择的字体，然后选择几种字体。
您可以通过单击字体名称旁边的（+）加号按钮来选择字体系列。
选择字体系列后，按查看您选择的字体系列按钮。
复制结果屏幕上显示的 HTML 代码行，并将其粘贴到您的 HTML 代码中，位于<head>标签下。将其放在<link>元素上方，以便在 CSS 中使用之前导入所需的字体。
为了将自定义字体应用于您的 HTML，请复制 CSS 中列出的 CSS 声明。

CSS 网页字体 - 导入字体

以下示例演示了在 HTML 代码中导入 Google 字体并使用它。

<html>
<head>
   <link href='https://fonts.googleapis.com/css?family=Lobster|Raleway' rel='stylesheet' type='text/css'>
<style>
   html {
      font-size: 12px;
      margin: 0;
      font-family: sans-serif;
   }

   body {
      width: 80%;
      max-width: 600px;
      margin: 0 auto;
   }

   h1 {
      font-size: 4.2rem;
   }

   h2 {
      font-size: 3.5rem;
   }

   h1, h2 {
      font-family: 'Lobster', cursive;
   }

   p {
      font-size: 1.4rem;
      line-height: 1.6;
      font-family: 'monospace', sans-serif;
   }
</style>
</head>
<body>
   <h1>Web Font</h1>
   <h2>Google Font</h2>
   <p>Using the Google Font (Lobster) by importing it.</p>
</body>
</html>

打印页面