【前端(八)】CSS3 属性值笔记：渐变、自定义字体与字体图标

是上好佳佳佳呀2026-04-23 13:38

文章目录

  • [1. 渐变（Gradient）](#1. 渐变（Gradient）)
    • [1.1 渐变是什么？](#1.1 渐变是什么？)
    • [1.2 线性渐变：linear-gradient()](#1.2 线性渐变：linear-gradient())
      • [1.2.1 最简单的语法](#1.2.1 最简单的语法)
      • [1.2.2 控制渐变方向](#1.2.2 控制渐变方向)
        • [1.2.2.1 使用关键词](#1.2.2.1 使用关键词)
        • [1.2.2.2 使用角度](#1.2.2.2 使用角度)
      • [1.2.3 设置渐变开始位置](#1.2.3 设置渐变开始位置)
    • [1.3 径向渐变：radial-gradient()](#1.3 径向渐变：radial-gradient())
      • [1.3.1 最简单的语法](#1.3.1 最简单的语法)
      • [1.3.2 控制圆心位置](#1.3.2 控制圆心位置)
        • [1.3.2.1 使用关键字](#1.3.2.1 使用关键字)
        • [1.3.2.2 使用坐标值](#1.3.2.2 使用坐标值)
      • [1.3.3 控制形状和大小](#1.3.3 控制形状和大小)
      • [1.3.4 设置渐变开始位置](#1.3.4 设置渐变开始位置)
    • [1.4 重复渐变：repeating-linear-gradient 与 repeating-radial-gradient](#1.4 重复渐变：repeating-linear-gradient 与 repeating-radial-gradient)
      • [1.4.1 基本语法](#1.4.1 基本语法)
      • [1.4.2 重复的"距离"是什么？](#1.4.2 重复的“距离”是什么？)
    • [1.5 实际应用：横格纸 & 立体球](#1.5 实际应用：横格纸 & 立体球)
  • [2. 字体与字体图标](#2. 字体与字体图标)
    • [2.1 用户电脑上没有我们想设置的特殊字体怎么办？](#2.1 用户电脑上没有我们想设置的特殊字体怎么办？)
      • [2.1.1 解决方案：使用 @font-face 让浏览器下载字体](#2.1.1 解决方案：使用 @font-face 让浏览器下载字体)
      • [2.1.2 开发 → 部署 → 访问：字体文件到底放在哪？](#2.1.2 开发 → 部署 → 访问：字体文件到底放在哪？)
    • [2.2 @font-face基本用法](#2.2 @font-face基本用法)
      • [2.2.1 基本语法](#2.2.1 基本语法)
      • [2.2.2 多格式兼容写法（了解即可）](#2.2.2 多格式兼容写法（了解即可）)
    • [2.3 性能问题：中文字体过大](#2.3 性能问题：中文字体过大)
      • [2.3.1 问题有多严重？](#2.3.1 问题有多严重？)
      • [2.3.2 解决方案一：font-display: swap（体验优化）](#2.3.2 解决方案一：font-display: swap（体验优化）)
      • [2.3.3 解决方案二：字体裁剪（根本优化）](#2.3.3 解决方案二：字体裁剪（根本优化）)
    • [2.4 字体裁剪的具体做法](#2.4 字体裁剪的具体做法)
      • [2.4.1 使用在线工具（以阿里 Web 字体定制工具为例）](#2.4.1 使用在线工具（以阿里 Web 字体定制工具为例）)
      • [2.4.2 自定义字体裁剪 + 上传到服务器](#2.4.2 自定义字体裁剪 + 上传到服务器)
    • [2.5 字体图标](#2.5 字体图标)
      • [2.5.1 字体图标 vs 传统图片](#2.5.1 字体图标 vs 传统图片)
      • [2.5.2 三种引入方式对比（以阿里图标库为例）](#2.5.2 三种引入方式对比（以阿里图标库为例）)
      • [2.5.2.1 Unicode 方式（原始字符方式）](#2.5.2.1 Unicode 方式（原始字符方式）)
      • [2.5.2.2 Font class 方式（推荐大多数项目使用）](#2.5.2.2 Font class 方式（推荐大多数项目使用）)
      • [2.5.2.3 Symbol 方式（SVG Sprite）](#2.5.2.3 Symbol 方式（SVG Sprite）)
      • [2.5.2.4 三种方式对比表格](#2.5.2.4 三种方式对比表格)
  • 补充问题：单位详解
    • [1. 哪些属性不能用 % 作为单位？](#1. 哪些属性不能用 % 作为单位？)
    • [2. % 在不同属性中的参考对象](#2. % 在不同属性中的参考对象)
    • [3. em 与 rem 参考速记](#3. em 与 rem 参考速记)
    • [4. 视口单位参考速记（vw/vh）](#4. 视口单位参考速记（vw/vh）)

上一节我们梳理了 CSS3 新增的属性，本章主要聚焦于新增的属性值 ，包括渐变、字体和字体图标。我们会理清每个知识点是什么、为什么用、怎么写，并配合对比表格和实际案例。

1. 渐变（Gradient）

1.1 渐变是什么？

渐变（<gradient>）是 CSS 中一种特殊的图像类型 ，它属于 <image> 类型。换句话说，渐变和 url(某图片.jpg) 是平级的，都是"图像值"，只是来源不同：一个是浏览器实时计算出来的，一个是外部资源。

✅ 记忆要点：渐变 = 图片 → 只能用在使用图片的 CSS 属性上。

可以使用渐变的属性（期待图片） 不能使用渐变的属性（期待纯色）
background-image color
border-image background-color
list-style-image border-color
mask-image ... 所有 <color> 类型的属性

1.2 线性渐变：linear-gradient()

沿着一条直线方向，从一种颜色过渡到另一种（或多种）颜色。

1.2.1 最简单的语法

css 复制代码 
background-image: linear-gradient(red, pink, yellow);
  • 参数：至少两个颜色值才会产生渐变。
  • 默认方向：从上到下（to bottom），角度对应 180deg。
  • 颜色分布 ：未指定位置时，颜色沿渐变线均匀分布。

1.2.2 控制渐变方向

1.2.2.1 使用关键词

  • 语法：to + 方位词

  • 支持的方位：

    • 单方向：to top、to right、to bottom（默认值）、to left
    • 对角方向：to top right、to top left、to bottom right、to bottom left

📌 注意：to top 表示从下往上渐变，即第一个颜色在底部，最后一个颜色在顶部。

css 复制代码 
linear-gradient(to top, red, pink, yellow);
  • 如图所示，to top表示从下往上，即按照红，粉，黄的书写颜色顺序从下至上分布。
css 复制代码 
linear-gradient(to right bottom, red, pink, yellow);
  • 同理，to right bottom表示从左上往右下，即按照红，粉，黄的书写颜色顺序从左上往右下分布。
1.2.2.2 使用角度
  • 单位：deg
  • 方位设置 ：0deg 等同于 to top ，增加角度值，是顺时针旋转。
    • 0deg = to top（从下往上）
    • 90deg = to right（从左往右）
    • 180deg = to bottom（从上往下，默认值）
    • 270deg = to left（从右往左）

💡 在没有指定方向或角度的情况下，linear-gradient() 的默认方向是 to bottom（从上到下），这在角度上对应的就是 180deg。

css 复制代码 
linear-gradient(45deg, red, pink, yellow);

如图所示，45deg 表示从左下角 → 右上角。

1.2.3 设置渐变开始位置

可以在每个颜色后面指定一个位置，表示该颜色纯色的起点，之后开始向下一颜色渐变。也可以理解为设置的这个位置是开始渐变的位置，这个位置的颜色一定是纯色的，然后开始进行渐变。

语法 ：<color> <位置>

css 复制代码 
linear-gradient(red 25%, pink 50%, yellow 75%);
  • 支持的长度单位：px、em、rem、%、vw、vh 等所有 CSS 长度单位。
  • % 相对于渐变线的长度（不是父元素，也不是元素自身尺寸）。
  • 位置值必须递增，否则浏览器会自动调整。

1.3 径向渐变：radial-gradient()

从一个中心点向外辐射状渐变。

1.3.1 最简单的语法

css 复制代码 
background-image: radial-gradient(red, pink, yellow);
  • 参数：至少两个颜色值才会产生渐变。
  • 默认圆心：元素中心点。
  • 默认形状 ：椭圆（ellipse），宽高相等时为正圆。
  • 颜色分布 ：未指定位置时，颜色沿渐变线均匀分布。

1.3.2 控制圆心位置

1.3.2.1 使用关键字

  • 语法：at + 方位词

  • 支持的方位：

    • 水平方向：right、left、center
    • 垂直方向：top、 bottom、center
    • 正中心：center（默认值）

📌 对比：线性渐变用 to 表示"渐变指向哪里"，径向渐变用 at 表示"圆心在哪里"。径向渐变可以设置center，这是线性渐变无法做到的，线性渐变没有"中心方向"概念。

css 复制代码 
radial-gradient(at right bottom, red, yellow);
1.3.2.2 使用坐标值
  • 语法：at x y
  • at 后面跟两个值（x, y），支持所有长度单位。
  • % 相对于元素自身的宽度和高度（x 参考宽度，y 参考高度）。
css 复制代码 
radial-gradient(at 25% 50%, red, yellow);

1.3.3 控制形状和大小

语法 ：<形状> <大小> at <圆心位置>

  • 形状：circle（正圆） 或 ellipse（椭圆，默认）
  • 大小：渐变结束的位置 ，也就是最后一个纯色出现的地方。例如：red → pink → yellow，边界处是最后一个黄色刚好达到100%为纯色的位置。
参数 说明
大小关键词 closest-side（到最近边）、farthest-side（到最远边）、 closest-corner（到最近角）、farthest-corner（到最远角，默认）
大小长度值 圆形：一个值表示半径；椭圆：两个值（水平半径 垂直半径）
大小百分比 圆形：参考宽度（忽略高度）；椭圆：两个百分比分别参考宽和高

💡小提示 ：如果想始终为正圆 （不受容器宽高比影响），务必加上 circle 关键字。

css 复制代码 
/* 到最近边 */
background-image: radial-gradient(closest-side,red,pink,yellow);
css 复制代码 
/* 默认情况 */
radial-gradient(red,pink,yellow);
css 复制代码 
/* 大小为150px，此时盒子的高度是333px，也就是一半的高度为166.5px*/
radial-gradient(150px,red,pink,yellow);
css 复制代码 
/* 大小为水平150px，垂直75px，此时盒子的高度是333px，也就是一半的高度为166.5px，四分之一为83.25px*/
radial-gradient(150px 75px,red,pink,yellow);
css 复制代码 
/* 水平半径是宽的50% 垂直半径是高的25%*/
radial-gradient(50% 25%,red,pink,yellow);
css 复制代码 
/* 正圆，半径 333px，圆心在右中 */
radial-gradient(circle 333px at right center,red,pink,yellow);

1.3.4 设置渐变开始位置

与线性渐变完全一样，写在颜色后面：

css 复制代码 
 radial-gradient(red 25%,pink 50%,yellow 75%);

百分比相对于径向渐变的大小长度（从圆心到最远/最近边缘，取决于大小关键词）。总的来说参考的是渐进线的大小。如图所示，易于理解记忆。

1.4 重复渐变：repeating-linear-gradient 与 repeating-radial-gradient

无论线性渐变，还是径向渐变，当渐变"走完"最后一个色标后，如果还没填满整个容器，就开始重复这个渐变单元。

1.4.1 基本语法

只需在对应的渐变函数前加 repeating- 前缀，参数完全相同。

css 复制代码 
/* 重复线性渐变 */
background-image: repeating-linear-gradient(red, yellow 20px);

/* 重复径向渐变 */
background-image: repeating-radial-gradient(circle, red, blue 30px);

1.4.2 重复的"距离"是什么？

核心答案 ：重复的是从第一个颜色停止位置到最后一个颜色停止位置之间的距离。

举例：

css 复制代码 
repeating-radial-gradient(red 25%,pink 50%,yellow 75%);
  • 渐变单元长度 = 75% - 25% = 50%（相对于径向渐变线长度）。
  • 在 75%～100% 区域，显示的是下一单元的 25%～50% 部分（即红→粉）。
  • 在 0%～25% 区域，显示的是上一单元的 50%～75% 部分（即粉→黄）。

简单来说25%→50%为 红→粉，50%→75% 为粉→黄，然后 75%-100%为红→粉，0%→25%为粉→黄重复同样模式。

1.5 实际应用：横格纸 & 立体球

横格纸（重复线性渐变）

css 复制代码 
div{
     height: 1111px;
     width: 777px;
     margin: 0 auto;
     background-image: repeating-linear-gradient(transparent,transparent 27px,#333 29px);
}
  • 实现效果如图 ：
  • 原理：透明→透明（27px）构成空白行(要存在这一区域，才能不被重复渐变覆盖)，然后突然变为深色线（29px），接着重复。因为透明到透明没有视觉变化，所以看起来就是均匀的横线。

立体球（径向渐变 + 内阴影）

css 复制代码 
div{
    height: 333px;
    width: 333px;
    background-image: radial-gradient(circle at 30% 30%, #fff, #e91e63, #880e4f);
    box-shadow: inset -10px -10px 20px rgba(0,0,0,0.5);
    border-radius: 50%;
}
  • 实现效果如图 ：
  • 原理 ：
    渐进图片作为背景图模拟光照（高光在左上），圆角设置裁出圆形，内阴影增强立体凹陷感。

2. 字体与字体图标

2.1 用户电脑上没有我们想设置的特殊字体怎么办？

在之前的笔记中我们学过，CSS 的 font-family 可以指定一系列本地字体 （如 "Microsoft Yahei", Arial）。但如果设计师希望使用一个用户电脑上没有安装的特殊字体（比如某款手写体、品牌定制字体），该怎么办？

❌ 误区 ：我在自己电脑上下载了一个字体文件，然后在 CSS 里用相对路径引用，本地打开 HTML 能看到效果，这样用户访问也能看到了吧？

✅ 真相：你本地打开能看见，是因为浏览器直接从你的硬盘读取文件。但其他用户无法访问你的硬盘。要让所有用户都能下载到这个字体，必须把字体文件放到一台公网服务器上（或者和你的网页一起部署到服务器）。

2.1.1 解决方案：使用 @font-face 让浏览器下载字体

CSS 提供了 @font-face 规则，可以指定一个字体文件的网络地址，浏览器会自动下载它，之后就能像本地字体一样使用。

❓ 浏览器如何下载字体文件？我们访问网页时只下载了 HTML，其他文件（CSS、图片、字体）也会下载吗？

✅ 答：浏览器首先请求 HTML 文件。解析 HTML 时，如果遇到 <link>、<script>、<img> 或者 CSS 中的 url()（如 @font-face 里的 src），会自动发起新的 HTTP 请求 去下载这些资源。所以字体文件是自动按需下载的，不需要用户手动操作。

2.1.2 开发 → 部署 → 访问：字体文件到底放在哪？

阶段 操作 字体文件位置 谁能访问？
开发 你把字体文件放进项目文件夹（如 ./fonts/myfont.ttf），CSS 中用相对路径 url("./fonts/myfont.ttf") 你的本地硬盘 只有你自己
部署 把整个项目文件夹上传到公网服务器（通过 FTP、Git 等） 服务器上的对应目录 无（尚未被请求）
访问 用户打开 http://你的域名 → 浏览器解析 HTML/CSS → 发现 url("./fonts/myfont.ttf") → 自动向你的服务器请求该文件 服务器返回文件给用户 所有用户

结论：

  • 你不需要单独把字体文件上传到另一个地方，也不需要写 https://... 的绝对地址。
  • 只需要把字体文件放在项目目录里，用相对路径引用，然后整个项目部署到服务器，用户就能正常下载。
  • 这和 CSS、图片、JS 文件的处理方式完全一致。

💡 什么时候需要写绝对 URL（例如 https://cdn.example.com/font.woff2）？

  • 使用第三方字体服务（如 Google Fonts、阿里 CDN）。
  • 字体文件存放在独立的静态资源服务器（与主站不同域名）。
  • 常规项目推荐相对路径，方便移植。

2.2 @font-face基本用法

2.2.1 基本语法

css 复制代码 
@font-face {
  font-family: "MyLoveFont";           /* 自定义名称 */
  src: url("./fonts/love-letter.ttf"); /* 字体文件路径 */
}

之后，你就可以在任何元素上使用这个自定义字体：

css 复制代码 
h1 {
  font-family: "MyLoveFont", "sans-serif"; /* 后备字体 */
}

2.2.2 多格式兼容写法（了解即可）

不同浏览器支持的字体格式不同，为了最大兼容，通常会提供多个 src：

css 复制代码 
@font-face {
  font-family: "MyCompatibleFont";
  src: url("font.eot");                         /* IE9 以下 */
  src: url("font.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
       url("font.woff2") format("woff2"),       /* 现代浏览器，压缩率高 */
       url("font.woff") format("woff"),         /* 较新浏览器 */
       url("font.ttf") format("truetype"),      /* 大多数现代浏览器 */
       url("font.svg#fontname") format("svg");  /* 早期 iOS Safari */
}

实际项目中，提供 woff2 和 woff 已经能满足绝大多数用户。

2.3 性能问题：中文字体过大

2.3.1 问题有多严重？

  • 完整的中文字体文件（如思源黑体、微软雅黑）通常有 5~15 MB。
  • 英文字体只有几十 KB。

如果让用户直接下载一个 10 MB 的字体，会导致：

  • 页面加载缓慢（尤其移动网络）。
  • 文字长时间不可见或出现闪烁。

字体文件过大导致页面闪烁（FOUT / FOIT）

  • FOIT（Flash of Invisible Text）：字体加载完成前文字不可见，加载后突然出现。
  • FOUT（Flash of Unstyled Text）：先显示后备字体，加载完后突然切换，产生"闪烁"。

2.3.2 解决方案一：font-display: swap（体验优化）

css 复制代码 
@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
  font-display: swap;
}

font-display: swap 是 CSS 中 @font-face 规则的一个属性，它控制浏览器在加载自定义字体时的渲染行为，决定了文字在字体文件下载完成之前如何显示：浏览器会先立即用后备字体显示文字，等自定义字体下载完成后再替换成自定义字体。虽然可能会发生一次字体切换，产生短暂的"闪烁"，但用户不会看到空白页面，避免长时间空白。

👉 这只改善了体验，没有减小文件体积。

2.3.3 解决方案二：字体裁剪（根本优化）

如果你的网页只用到几十个汉字（例如"你好世界"），完全没必要让用户下载包含数万汉字的完整字体。只提取页面中出现的字符，生成一个只有几十 KB 的小文件，这就是"字体裁剪"。

2.4 字体裁剪的具体做法

2.4.1 使用在线工具（以阿里 Web 字体定制工具为例）

🔗 https://www.iconfont.cn/webfont

  1. 输入你需要用到的汉字（例如"欢迎光临"）。
  2. 选择一款基础字体（如"站庆快乐体"）。
  3. 工具自动生成只包含这些汉字 的字体文件（.woff2, .woff, .ttf 等），并提供 @font-face 代码。

❓ 疑问：这些网站上的字体也不是我自己设计的，那有什么用？如果我要用一个真正的特殊字体呢？

✅ 答：这个工具的价值在于演示裁剪思想 。即使你用的是系统自带的艺术字体，完整版也可能有几 MB，裁剪后能降到几十 KB。

如果你有自己的定制字体（设计师给的 .ttf），请看下面的方法。

2.4.2 自定义字体裁剪 + 上传到服务器

如果你拥有一个特殊的字体文件（商业字体或设计师定制），可以按以下步骤操作：

  1. 拿到完整字体文件（例如 custom.ttf，可能 10 MB）。

  2. 使用裁剪工具 （如 字蛛、FontSubset）提取页面中实际用到的字符，生成小体积子集文件（例如 custom-subset.woff2，几十 KB）。

  3. 将裁剪后的小文件放到你的项目目录中（例如 ./fonts/custom-subset.woff2）。

    ⚠️ 注意：这里放的是裁剪后的小文件，不是原始大文件。

  4. 像往常一样部署整个项目（把包含小字体文件的文件夹上传到服务器）。

  5. 在 @font-face 中用相对路径引用这个小文件，并配合 font-display: swap。

css 复制代码 
@font-face {
  font-family: "MyCustomFont";
  src: url("./fonts/custom-subset.woff2") format("woff2");
  font-display: swap;
}

2.5 字体图标

字体图标就是一套"把图标当作文字字符"的定制字体，因此它必须通过 @font-face 加载。由于每个图标都是简单的矢量形状，字体文件通常很小（几十到几百 KB），不需要裁剪。而且有大量现成的图标库（如阿里图标库、Font Awesome）可以直接使用。

2.5.1 字体图标 vs 传统图片

对比项 图片图标 (PNG/JPG) 字体图标
缩放 放大模糊（位图） 无限清晰（矢量）
颜色 不能动态改变（需多张图） 直接用 color 改变
大小 width/height，可能失真 font-size，平滑缩放
样式 无法加阴影、渐变 支持 text-shadow、filter
HTTP 请求 每个图标一张图 → 请求多 一个字体文件包含所有图标
语义/可访问性 屏幕阅读器难处理 可配合文字，辅助设备友好
  • 字体图标适合：单色图标、需要频繁改变颜色/大小（后台菜单、底部导航栏）。
  • 图片适合：复杂多色图标、照片、渐变纹理丰富的图形。

2.5.2 三种引入方式对比（以阿里图标库为例）

字体图标的具体使用方式，每个平台不尽相同，最好参考平台使用指南，我们是以使用最多的阿里图标库作为演示。

阿里图标官网地址：https://www.iconfont.cn/

可以添加喜欢的图标加入购物车，然后添加至项目后如图所示，一个项目可以生成三种引入方式。

2.5.2.1 Unicode 方式（原始字符方式）

原理 ：把图标当成特殊的文字字符，通过 HTML 实体（如 &#xe72a;）引用。

代码示例（在线链接）：

html 复制代码 
<style>
        @font-face {
        font-family: 'iconfont';  /* Project id 5165338 */
        src:url('//at.alicdn.com/t/c/font_5165338_wo2fr6kvh1d.woff2?t=1776783717914') format('woff2'),
            url('//at.alicdn.com/t/c/font_5165338_wo2fr6kvh1d.woff?t=1776783717914') format('woff'),
            url('//at.alicdn.com/t/c/font_5165338_wo2fr6kvh1d.ttf?t=1776783717914') format('truetype');
        }
        .iconfont{
            font-family: "iconfont" !important;
            font-size:30px;
        }
</style>
<span class="iconfont">&#xe72b;祝你今天嘴角上扬&#xe72a;</span>

优缺点：

  • ✅ 兼容性最好（IE6+）
  • ❌ 编码不可读（&#xe72a; 不知道是什么图标）
  • ❌ 不支持多色图标

显示效果 ：

2.5.2.2 Font class 方式（推荐大多数项目使用）

原理 ：在 Unicode 基础上，阿里帮你生成一个 CSS 文件，里面用 .icon-xxx::before { content: "\e72a"; } 的方式定义好每个图标。你只需给元素加上对应的类名。

代码示例：

html 复制代码 
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_5165338_wo2fr6kvh1d.css">
<span class="iconfont icon-taozi"></span>	<!-- 空标签也能显示图标 -->
<span class="iconfont icon-caomei">祝你今天嘴角上扬</span>
<span class="iconfont icon-huolongguo"></span>
<span class="iconfont icon-mangguo"></span>
<span class="iconfont icon-xiangjiao"></span>

优缺点：

  • ✅ 语义化类名，可读性好
  • ✅ 可以用 CSS 控制大小、颜色（单色）
  • ✅ 兼容 IE8+
  • ❌ 不支持多色图标

显示效果 ：

❓ 你问：空标签为什么能显示图标？

✅ 答：因为 CSS 文件中定义了类似

css 复制代码 
.iconfont {
	font-family: "iconfont" !important;
}
.icon-taozi::before {
	content: "\e72a"; 
}

伪元素自动插入了 Unicode 字符，等同于你在 HTML 里写了 &#xe72a;。

2.5.2.3 Symbol 方式（SVG Sprite）

原理 ：将多个图标整合成一个 SVG 文件，通过 <use> 标签引用图标的 ID。

代码示例：

html 复制代码 
<script src="//at.alicdn.com/t/c/font_5165338_wo2fr6kvh1d.js"></script>
<style>
  .icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;   
    overflow: hidden;
  }
</style>

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

优缺点：

  • ✅ 完美支持多色图标（每个部分可以不同颜色）
  • ✅ 支持渐变、动画
  • ✅ 现代浏览器性能好
  • ❌ 兼容性要求 IE9+（不再支持老 IE）
  • ❌ HTML 结构稍复杂

显示效果：

2.5.2.4 三种方式对比表格

对比维度 Unicode Font class Symbol (SVG)
原理 图标作为特殊字符，用 HTML 实体 通过 CSS 伪元素插入 Unicode 使用 SVG <use> 引用图标 ID
可读性 差（&#xe72a;） 好（icon-taozi） 较好（#icon-taozi）
兼容性 IE6+ ✅ IE8+ ✅ IE9+ ✅
多色图标 ❌ 不支持 ❌ 不支持 ✅ 完美支持
CSS 控制 只控制单色大小颜色 只控制单色大小颜色 可精细控制 SVG 各部分颜色/渐变
HTML 结构 较简洁 最简洁 稍复杂（需要 <svg><use>）
推荐场景 需要兼容古董浏览器 日常绝大多数单色图标项目 ⭐ 需要多色/渐变/动画图标的现代项目

关于文件路径：在阿里图标库中，你可以选择两种使用方式：

  • 本地部署：点击"下载到本地"，将字体文件放入项目目录，然后像部署其他项目资源一样上传到服务器（使用相对路径引用）。
  • 在线引用：直接复制生成的 CDN 链接（如 //at.alicdn.com/...），无需自己托管字体文件。

本文示例为了方便，全部展示的是在线引用 方式。两者的核心区别在于字体文件是由你自己托管，还是使用阿里的 CDN。

具体操作可参考阿里图标库提供的官方帮助文档。

补充问题：单位详解

在渐变中我们用到 %、px 等单位，你可能会疑惑：是否所有属性都支持所有单位？% 的参考对象是什么？

我们知道对于绝对单位px与相对单位绝大多数长度场景下都是可以使用的，除了%拥有一些特殊情况，那么哪些属性不能用 % 作为单位？不要因为少数例外而焦虑，每天写的 CSS 中，95% 的属性都愉快地接受所有常见长度单位。

1. 哪些属性不能用 % 作为单位？

极少数属性不能用百分比，主要是：

  • border-width
  • box-shadow 的偏移量和模糊半径
  • outline-width

其他属性（width、margin、padding、transform、渐变中的色标位置等）放心使用各种单位。

2. % 在不同属性中的参考对象

使用场景 % 参考对象 示例
width: 50% 父元素的内容宽度 父宽 200px → 100px
height: 50% 父元素的高度（父需有明确高度） 父高 300px → 150px
font-size: 150% 父元素的 font-size 父 16px → 24px
margin: 10% 父元素的宽度（上下左右都参考宽度） 父宽 500px → 50px
padding: 10% 同上，父元素的宽度 同上
top: 20% 最近已定位祖先的高度 祖先高 400px → 80px
line-height: 150% 当前元素的 font-size 当前字体 20px → 30px
background-size: 50% 元素自身的宽/高 元素宽 800px → 400px
渐变中的颜色停止位置 linear-gradient(red 30%) 渐变线的长度 渐变线长 200px → 60px 位置
transform: translateX(50%) 元素自身的宽度 自身宽 100px → 50px

🧠 记忆技巧：

  • 绝大多数 % 都是参考父元素的对应属性（width/height/font_size)。
  • margin/padding 参考 父元素的宽度，无论设置的是左右还是上下内外边距，参考的都是父元素的宽度。
  • 定位偏移(top/right/bottom/left) 参考最近定位祖先的对应尺寸。
  • line-height 参考当前元素的字体。
  • background-size 和 transform 参考元素自身
  • 渐变中的 % 参考渐变线自身的长度。

3. em 与 rem 参考速记

em：作为 font-size 时参考父元素字体；作为其他属性（width、margin）时参考当前元素的字体大小。

rem：始终参考根元素（） 的字体大小（通常浏览器默认 16px）。

4. 视口单位参考速记（vw/vh）

永远参考浏览器窗口（视口）：1vw = 视口宽度的 1%，1vh = 视口高度的 1%

以上为个人学习总结，旨在梳理个人理解。如有疏漏或不当之处，欢迎指正与交流。

相关推荐
Keep Running *2 小时前
Django_学习笔记
笔记·学习·django
今天你TLE了吗2 小时前
LLM到Agent&RAG——AI概念概述 第五章：Skill
人工智能·笔记·后端·学习
踩着两条虫2 小时前
VTJ：核心引擎
前端·低代码·ai编程
GISer_Jing2 小时前
AI时代前端开发者成长计划
前端·人工智能
方安乐2 小时前
网页设计：自动适配浏览器深色/浅色模式
前端·html5
qq_12084093712 小时前
Three.js 工程向：后处理性能预算与多 Pass 链路优化
前端·javascript
南棱笑笑生2 小时前
20260422给万象奥科的开发板HD-RK3576-PI适配瑞芯微原厂的Buildroot时使用mpg123播放mp3音频
前端·javascript·音视频·rockchip
乙酸氧铍3 小时前
【imx6ul 学习笔记】移植ubuntu 20.04系统
笔记·学习·ubuntu
鱼鳞_3 小时前
Java学习笔记_Day37（网络编程）
java·网络·笔记·学习
热门推荐
012026年4月技术前沿：AI大模型爆发、智能体革命与量子安全新纪元02GitHub 镜像站点032026年4月AI大事件深度解读：大模型竞争进入“深水区“04近期有什么ai的新消息，新动态？ 2026.4月052026 年 AI 编程助手全面对比评测：Cursor vs Copilot vs Claude Code vs GitHub Copilot Free06AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析07CC-Switch & Claude 基于 Linux 服务器安装使用指南08从限购到畅通：GLM-5.1 Coding Plan接入攻略09codex app每次打开重连5次Reconnecting问题解决10Claude Code Windows 兼容性问题：指定版本 2.1.112 可解决