Webfont 是什么,网页中怎么选和用

Webfont（网页字体）是通过 CSS 的 @font-face 规则在网页中加载并渲染的字体文件，用户浏览器下载字体后按指定字符集显示文字或图标。它适合需要统一视觉风格、使用系统字体无法覆盖的字形，或把图标当字体来用的场景；如果只是显示普通正文且对字体没有要求，直接用系统字体栈更省流量、也更快。

Webfont、系统字体、SVG 图标、位图图标的区别

类型	加载方式	缩放表现	典型用途	主要代价
Webfont	下载字体文件，`@font-face` 引入	矢量，任意缩放清晰	品牌字体、多语言字形、图标字体	增加请求与体积，可能闪烁
系统字体	无需下载，调用本机字体	矢量	正文、通用界面文字	不同设备显示不一致
SVG 图标	内联或作为图片引入	矢量	少量、需多色或精细控制的图标	数量多时标记变长
位图图标	引入 PNG/JPG 等	放大会模糊	复杂插画、照片类图形	不随分辨率自适应

选择思路：文字排版优先考虑系统字体，确有品牌或字形需求再用 webfont；图标数量少、需要多色或动画时用 SVG；图标数量多、只需单色且希望像文字一样用 CSS 控制颜色和大小，可考虑图标字体。

常见 webfont 格式与兼容性

WOFF2：压缩率最好，现代浏览器普遍支持，优先使用。
WOFF：兼容性较广，可作为回退。
TTF/OTF：体积较大，多用于旧环境或本地安装。
EOT：早期 IE 使用，现代项目一般不再需要。

实践做法是同时提供 WOFF2 与 WOFF，让浏览器按 src 顺序自行选择支持的格式。

在 CSS 中引入 webfont 的基本步骤

准备字体文件：拿到授权允许网页嵌入的 .woff2 / .woff 文件，放到站点可访问的目录。
声明 @font-face：指定字体名称和文件来源。

@font-face {
  font-family: "MyWebFont";
  src: url("/fonts/myfont.woff2") format("woff2"),
       url("/fonts/myfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

在样式中调用：把 font-family 指向声明的名称。

body {
  font-family: "MyWebFont", system-ui, sans-serif;
}

预期结果：浏览器下载字体文件后，匹配到的文字用该字体渲染；文件未就绪时按 font-display 策略处理，swap 会先用回退字体显示，加载完成后再替换。

验证：打开浏览器开发者工具的 Network 面板，确认字体文件返回 200；在 Elements 面板检查元素最终生效的 font-family。

图标字体（如 FontAwesome）作为 webfont 的用法

FontAwesome 中文版被描述为一款基于 CSS 框架的网页字体图标库，属于 webfont 的一种用法：图标以字体字形形式存在，通过类名或字符码调用，颜色和大小可用 CSS 的 color、font-size 控制。

使用要点：

引入其 CSS 后，按官方类名在元素上添加对应图标类即可显示图标。
图标本质是文字，因此继承文字的颜色、行高和对齐方式，适合与文本混排。
图标字体通常只包含图标字形，不要用它渲染正文。

加载失败或显示异常的常见排查方向

图标显示成方框或乱码：字体文件未加载成功，或字符码与字体版本不匹配。检查 Network 中字体请求状态。
路径错误：@font-face 里的 url() 相对路径以 CSS 文件位置为基准，路径写错会 404。
跨域被拦截：字体文件放在其他域名时，需要该域返回允许跨域的响应头。
格式不被识别：format() 标注与实际文件不符，浏览器会跳过该来源。
文字闪烁或跳动：与 font-display 策略有关，swap 会先显示回退字体，block 会短暂隐藏文字。
只显示部分字符：字体文件本身未包含这些字形，需要确认字符集覆盖范围。

怎么选：按条件判断

需要统一品牌字形、且能接受额外下载：用 webfont。
只是普通正文、追求加载速度：用系统字体栈。
图标数量少、需要多色或复杂效果：用 SVG。
图标数量多、只需单色、希望用 CSS 统一控制：可考虑图标字体。
面向网络条件较差的用户：控制字体子集，只保留实际用到的字符，减小体积。