CSS 字体

CSS 非布局样式

字体、字重、颜色、大小、行高
背景、边框
滚动、换行
粗体、斜体、下划线、删除线
其它

字体

CSS 字体（CSS fonts）是 CSS 的一部分，它允许您在网页上指定字体的样式和外观。使用 CSS 字体，您可以定义字体的大小、颜色、字体族、字体类型、字体变形和字体样式，从而控制文本的外观。

font-family：用于定义字体族。可以指定一系列字体，用逗号分隔，浏览器将按照顺序选择最适合的字体。例如，font-family: "Times New Roman", Times, serif; 将定义文本的字体为 Times New Roman、Times 或衬线字体。
font-size：用于定义字体的大小。可以使用绝对大小（如 px、pt）或相对大小（如 em、rem）。例如，font-size: 16px; 将定义文本的大小为 16 像素。
font-weight：用于定义字体的粗细。可以指定字体的粗细程度，如 normal、bold、bolder、lighter，或指定一个数字，范围从 100（ultra-light）到 900（ultra-bold）。例如，font-weight: bold; 将定义文本为粗体。
font-style：用于定义字体的样式。可以指定字体的样式，如 normal（默认）、italic（斜体）或 oblique（倾斜）。例如，font-style: italic; 将定义文本为斜体。
font-variant：用于定义字体的变形。可以指定字体的变形，如 normal（默认）或 small-caps（小型大写字母）。例如，font-variant: small-caps; 将定义文本为小型大写字母。
line-height：用于定义行高。可以使用绝对大小或相对大小。例如，line-height: 1.5; 将定义行高为字体大小的 1.5 倍。
letter-spacing：用于定义字母间距。可以使用绝对大小或相对大小。例如，letter-spacing: 2px; 将定义字母间距为 2 像素。
word-spacing：用于定义单词间距。可以使用绝对大小或相对大小。例如，word-spacing: 3px; 将定义单词间距为 3 像素。

字体族

在 CSS 中，字体族（font-family）是用来定义网页文本的字体的属性之一。字体族属性指定了一组字体，按照优先级顺序展示，直到找到用户电脑上可用的字体为止。如果指定的字体没有被找到，浏览器会使用默认字体来展示文本。

常见的字体族包括：

serif：衬线字体，例如 Times New Roman、Georgia 等。
sans-serif：无衬线字体，例如 Arial、Helvetica 等。
monospace：等宽字体，例如 Courier New、Consolas 等。
cursive：草书字体，例如 Comic Sans MS、Monotype Corsiva 等。
fantasy：装饰字体，例如 Impact、Brush Script MT 等。

css

font-family: sans-serif;

font-family: sans-serif;

浏览器使用默认的 sans-serif 字体。

CSS 字体族引号问题

details css 里的字体名字什么时候需要加引号 - 掘金 (juejin.cn)

规范定义了如下的字体族关键字：serif, sans-serif, cursive, fantasy, 和 monospace.这些关键字可以作为普通的回退机制，以防期望的字体不可以用的时候。作者被鼓励在字体定义的最后面加上一种上面这些字体之一作为最后的可选项，来提高代码的鲁棒性。作为关键字，他们不需要引号。
换句话说，font-family: sans-serif代表的是一个普通的 sans-serif 字体族。而font-family: 'sans-serif'则代表了一个名字叫 sans-serif 的字体。这个区别很重要。
所有的关键字都是大小写不敏感的。举个栗子：Monospace和monospace，mOnOsPaCe都代表同一个关键字。如果你想用和关键字一样名字的字体时，需要加引号。
在约定的合法的标识符了唯一不允许的字符是U+0020 space characters，所有的空格分隔非关键字的部分都是合格的标识符，标识符可以作为一个没有引号的字体族名字。
所有满足^(-?\d|--)的都不是合法的标识符
如果一个字体族的名字和关键字一样，那么需要加引号；
css
font-family: Red/Black; /* 非法的，因为标识符里没有/ */

font-family: Red\/Black; /* 合法的 — `/`被转义了 */

font-family: "Lucida" Grande; /* 非法的，字符串和标识符不能混用：*/

font-family: "Lucida Grande"; /* 合法的 — it’s a single string: */

font-family: Lucida Grande; /* 合法的 — 空格分隔的标识符序列：*/

font-family: Lucida Grande; /* 合法的 — 空格分隔的两个标识符：*/

font-family: Ahem!; /* 非法的 标识符里不允许出现`!`*/

font-family: "Ahem!"; /* 合法的 — 字符串：*/

font-family: Ahem\!; /* 合法的 — `!`转义了：*/

font-family: Hawaii 5-0; /* 非法的 标识符不能以数字开头：*/

font-family: "Hawaii 5-0"; /* 合法的 — 字符串：*/

font-family: Hawaii \35 -0; /* 合法的 — `\35 `是 `5`的转义：*/

font-family: Hawaii\5-0; /* 合法的 — `\ ` 是空格的转义 ` `: */

font-family: $42; /* 合法的 — `$` : */

font-family: \$42; /* 合法的 —  `$` 转义了：*/

font-family: €42; /* 合法的 — `€` 允许出现在标识符里：*/
font-family: Red/Black; /* 非法的，因为标识符里没有/ */

font-family: Red\/Black; /* 合法的 — `/`被转义了 */

font-family: "Lucida" Grande; /* 非法的，字符串和标识符不能混用：*/

font-family: "Lucida Grande"; /* 合法的 — it’s a single string: */

font-family: Lucida Grande; /* 合法的 — 空格分隔的标识符序列：*/

font-family: Lucida Grande; /* 合法的 — 空格分隔的两个标识符：*/

font-family: Ahem!; /* 非法的 标识符里不允许出现`!`*/

font-family: "Ahem!"; /* 合法的 — 字符串：*/

font-family: Ahem\!; /* 合法的 — `!`转义了：*/

font-family: Hawaii 5-0; /* 非法的 标识符不能以数字开头：*/

font-family: "Hawaii 5-0"; /* 合法的 — 字符串：*/

font-family: Hawaii \35 -0; /* 合法的 — `\35 `是 `5`的转义：*/

font-family: Hawaii\5-0; /* 合法的 — `\ ` 是空格的转义 ` `: */

font-family: $42; /* 合法的 — `$` : */

font-family: \$42; /* 合法的 —  `$` 转义了：*/

font-family: €42; /* 合法的 — `€` 允许出现在标识符里：*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

多字体 fallback

为了确保所有用户都能看到正确的字体，您可以在 CSS 中为每个字体族指定多个字体。在指定多个字体时，将字体族按优先级顺序列出。浏览器将按照指定的顺序尝试加载字体，直到找到用户电脑上可用的字体为止。

css

font-family: "Helvetica Neue", Arial, sans-serif;

font-family: "Helvetica Neue", Arial, sans-serif;

浏览器先尝试使用 Helvetica Neue 字体，如果无法使用，则尝试 Arial 字体，最后使用浏览器默认的 sans-serif 字体。

网络字体

网络字体是一种可以从互联网上下载并应用于网页的字体。通过使用网络字体，可以提供更丰富、个性化的字体，而无需依赖于用户的操作系统或浏览器提供的默认字体。

要在网页中使用网络字体，您需要在 CSS 文件中引入字体，通常使用 @font-face 规则来实现。

使用 Google Fonts 提供的 Open Sans 字体：

css

@font-face {
  font-family: "Open Sans";
  src: url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
}

@font-face {
  font-family: "Open Sans";
  src: url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
}

INFO

在使用网络字体时，需要注意字体文件的大小和加载速度，以及版权问题。

自定义字体

除了使用网络字体外，还可以使用自定义字体。自定义字体是指自己创建的字体，可以使用字体设计软件来创建。

在使用自定义字体时，需要将字体文件上传到您的服务器，然后使用 @font-face 规则来引入字体。

使用自定义字体：

css

@font-face {
  font-family: "My Custom Font";
  src: url("mycustomfont.ttf") format("truetype");
}

@font-face {
  font-family: "My Custom Font";
  src: url("mycustomfont.ttf") format("truetype");
}

Details

fonts (imooc-164-code.vercel.app)

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>fonts</title>
    <style>
      body {
        /* font-family: "monaco"; */
        /* font-family: "monaco", "PingFang SC"; */
        font-family: "aaaaa", "monaco", "PingFang SC";
      }
      .chinese {
        font-family: "PingFang SC", "Microsoft Yahei", monospace;
        /* font-family: "Microsoft Yahei", serif; */
        /* font-family: "serif"; */
      }
      .weight {
        font-weight: bold;
        font-weight: bolder;
        font-weight: lighter;
        font-weight: normal;
        font-weight: 100;
      }
      @font-face {
        font-family: "IF";
        src: url("./IndieFlower.ttf");
      }
      .custom-font {
        font-family: IF;
      }
    </style>
  </head>
  <body class="body" id="body">
    Hello world 你好，世界
    <div class="chinese">你好</div>
    <!-- <div class="weight">你好 Hello World</div> -->
    <div class="custom-font">你好 Hello World</div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>fonts</title>
    <style>
      body {
        /* font-family: "monaco"; */
        /* font-family: "monaco", "PingFang SC"; */
        font-family: "aaaaa", "monaco", "PingFang SC";
      }
      .chinese {
        font-family: "PingFang SC", "Microsoft Yahei", monospace;
        /* font-family: "Microsoft Yahei", serif; */
        /* font-family: "serif"; */
      }
      .weight {
        font-weight: bold;
        font-weight: bolder;
        font-weight: lighter;
        font-weight: normal;
        font-weight: 100;
      }
      @font-face {
        font-family: "IF";
        src: url("./IndieFlower.ttf");
      }
      .custom-font {
        font-family: IF;
      }
    </style>
  </head>
  <body class="body" id="body">
    Hello world 你好，世界
    <div class="chinese">你好</div>
    <!-- <div class="weight">你好 Hello World</div> -->
    <div class="custom-font">你好 Hello World</div>
  </body>
</html>

字体图标

字体图标是使用字体来展示图标的一种技术。字体图标通常使用特殊的字体文件，其中包含了一系列图标，可以通过 Unicode 编码来访问这些图标。

在使用字体图标时，您需要将字体文件引入到您的 CSS 中，并使用 Unicode 编码来展示相应字体图标。

常用于字体图标的字体包括 FontAwesome、Material Icons、Iconfont 等。

使用 FontAwesome 字体图标：

css

@font-face {
  font-family: "FontAwesome";
  src: url("fontawesome-webfont.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

.icon {
  font-family: "FontAwesome";
  content: "\f007";
}

@font-face {
  font-family: "FontAwesome";
  src: url("fontawesome-webfont.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

.icon {
  font-family: "FontAwesome";
  content: "\f007";
}

在上面的代码中，@font-face 规则定义了一个字体家族为 FontAwesome，然后通过使用 content 属性以 Unicode 编码的方式来展示图标。\f007 对应于 FontAwesome 中的一个放大镜图标。

通过使用字体图标，您可以通过 CSS 轻松地调整图标的颜色、大小、样式等属性，并且可以避免使用传统的图像文件，从而减小网页的大小。

Iconfont

iconfont，国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具。

以下的使用方式都是来自下载下来的 demo 代码，把这些都整合在一起，方便比较和查阅。至于使用在线链接的方式，因为比较简单，这里就不做介绍。

unicode 引用

unicode 是字体在网页端最原始的应用方式，特点是：

兼容性最好，支持 ie6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。
但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

注意：新版 iconfont 支持多色图标，这些多色图标在 unicode 模式下将不能使用，如果有需求建议使用 symbol 的引用方式。

unicode 使用步骤

拷贝项目下面生成的 font-face

css

@font-face {
  font-family: "iconfont";
  src: url("iconfont.eot");
  src: url("iconfont.eot?#iefix") format("embedded-opentype"), url("iconfont.woff") format("woff"),
    url("iconfont.ttf") format("truetype"), url("iconfont.svg#iconfont") format("svg");
}

@font-face {
  font-family: "iconfont";
  src: url("iconfont.eot");
  src: url("iconfont.eot?#iefix") format("embedded-opentype"), url("iconfont.woff") format("woff"),
    url("iconfont.ttf") format("truetype"), url("iconfont.svg#iconfont") format("svg");
}

定义使用 iconfont 的样式

css

.iconfont {
  font-family: "iconfont" !important;
  font-size: 2em;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 2em;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

挑选相应图标并获取字体编码，应用于页面

html

<span class="iconfont">&#x33;</span>

<span class="iconfont">&#x33;</span>

font-class 引用

font-class 是 unicode 使用方式的一种变种，主要是解决 unicode 书写不直观，语意不明确的问题。

与 unicode 使用方式相比，具有如下特点：

兼容性良好，支持 ie8+，及所有现代浏览器。
相比于 unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 unicode 引用。
不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用步骤

拷贝项目下面生成的 fontclass 代码：

css

<link href="https://at.alicdn.com/t/c/font_8d5l8fzk5b87iudi.css" rel="stylesheet" />

<link href="https://at.alicdn.com/t/c/font_8d5l8fzk5b87iudi.css" rel="stylesheet" />

定义使用 iconfont 的样式

css

.iconfont {
  font-size: 2em;
}

.iconfont {
  font-size: 2em;
}

挑选相应图标并获取类名，应用于页面：

html

<span class="iconfont icon-xxx"></span>

<span class="iconfont icon-xxx"></span>

symbol 引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。这种用法其实是做了一个 svg 的集合，与上面两种相比具有如下特点：

支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过 font-size, color来调整样式。
兼容性较差，支持 ie9+,及现代浏览器。
浏览器渲染 svg 的性能一般，还不如 png。

使用步骤

拷贝项目下面生成的 symbol 代码

html

<script defer src="//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js"></script>

<script defer src="//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js"></script>

加入通用 css 代码（引入一次就行）：

css

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

挑选相应图标并获取类名，应用于页面：

html

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

CSS 字体 #

CSS 非布局样式 #

字体 #

字体族 #

多字体 fallback #

网络字体 #

自定义字体 #

字体图标 #

Iconfont #

unicode 引用 #

font-class 引用 #

symbol 引用 #

CSS 字体

CSS 非布局样式

字体

字体族

多字体 fallback

网络字体

自定义字体

字体图标

Iconfont

unicode 引用

font-class 引用

symbol 引用