Css 简明教程

CSS - Web Fonts

在网站中使用的字体，但未在用户的设备上默认安装，称为 web font 。CSS 允许指定在网上可用的字体文件，以便在访问时轻松随你的网站一起下载。

CSS Web Fonts - Font Format Types

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

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

CSS Web Fonts - Key Points

以下部分中指定了一些与网络字体相关的要点：

网络上的字体通常不是免费的。你需要付钱购买字体，或遵守许可条件，例如在你的代码或网站上为字体创建者添加署名。窃取这些字体或在未经适当授权的情况下使用这些字体在道德上是错误的。
网络开放字体格式版本 1 和 2（WOFF 和 WOFF2）受主要浏览器支持，甚至旧版本浏览器也支持。
TrueType 和 OpenType 规范（包括可变字体、彩色字体和字体集合）完全受 WOFF2 文件格式支持。
字体文件的列出顺序很重要。浏览器会从提供的多个字体文件中选择它能够使用的第一个字体文件。因此，你应首先列出首选的格式。当浏览器无法识别某种格式时，它会回退到下一种格式。
使用传统浏览器时，应提供可下载的 EOT（嵌入式开放字体）、TTF（TrueType 字体）和 SVG 网页字体。

CSS Web Fonts - @font-face At-Rule

使用 * @font-face* CSS at 规则，可以针对用户设备上未安装的网站指定字体。 @font-face at 规则具有多个描述符来标识和描述字体。请参考以下代码块以了解 @font-face at 规则语法：

@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-face at 规则的示例：

<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 Web Fonts - @font-face / font-stretch

以下示例演示在 @font-face at 规则中使用百分比范围 50% and 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 at 规则及其描述符（例如 font-family, src, font-style, 和 font-stretch ）的声明。

CSS Web Fonts - Online Font Service

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

Go to Google Fonts.
搜索所需的字体或使用提供的过滤器查找您选择的字体，然后选择几种字体。
您可以通过单击字体名称旁边的 (+) 加号按钮来选择字体家族。
选择字体家族后，按 View your selected families 按钮。
复制结果屏幕上显示的 HTML 代码行，并将其粘贴到 HTML 代码中 <head> 标记下方。将其放在 <link> 元素上方，以便在 CSS 中使用自定义字体之前导入该字体。
为了将自定义字体应用于 HTML，请复制 CSS 中列出的 CSS 声明。

CSS Web Fonts - Import Font

以下示例演示在 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>