Web前端开发技术

Appearance

图标字体 ​

元信息 ​

  • 目标：理解用字体技术承载图标的思路——矢量、分辨率无关、可用 CSS 定制，并知道 SVG 图标是对 icon font 缺陷的更新回答
  • 关键概念：icon font、@font-face、矢量图形、font awesome、SVG icon
  • 关联阶段：cp1
  • 常见误区：以为图标放大必然模糊（字体是矢量图形，分辨率无关，模糊的是位图方案）；以为引用图标库须引入整库（可在线定制子集，只带用到的图标）

why? ​

图片作为由外渲染的占位元素，缺乏像文本或字体那样的弹性伸缩和样式定制等特性

解决方案: icon font ​

  • 利用字体工具将图形图标（icons）转换成 web fonts，形成 icon fonts 库
  • 借助 CSS3 的 @font-face 指令将该资产引入页面
  • 字体是矢量化图形，它天生具有「分辨率无关」的特性，即在任何分辨率和PPI下面，都可以做到完美缩放，不同于传统位图(png/jpeg等)，逻辑放大后有锯齿或模糊现象

icon font 库： font awesome ​

定制 icon font 库 ​

使用第三方Icon font的好处在于可以共享他人的设计成果,但假如只需要引用少量图标,而因此引入整个图标字体则浪费带宽

前端社区提供了各种在线工具,允许定制专有的icon font库(及配套的字体文件、css代码)

参考阅读 ​

图标库 ​

当前较为成熟的图标库，不但支持font的打包格式，还提供npm包等形式，方便各种前端框架导入 比如： https://tabler-icons.io/

更多图标库

SVG ICON ​

最新的解决方案是采用SVG图标，不但继承了FONT ICON的优势，并且规避了字体库需要外联和定制的缺陷

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox