网页字体图标库引入：HTML文档结构中Font-face的配置-html教程-PHP中文网

图标不显示主因是@font-face未在首次调用前解析：必须置于css开头、路径以css文件为基准、font-family与format()严格匹配、必设font-display:swap且各字重需独立声明。

网页字体图标库引入：html文档结构中font-face的配置

@font-face 必须写在 CSS 文件最开头，否则浏览器直接跳过，图标根本不会加载。

为什么图标不显示？90% 是 @font-face 解析失败

浏览器解析 CSS 时，@font-face 规则必须在首次用到对应 font-family 之前被读取，否则整条规则被忽略——哪怕你后面写了 .fa { font-family: 'Font Awesome 6 Free'; }，也毫无作用。

常见错误：把 @font-face 塞进 <style scoped></style>（Vue）、或放在 CSS 文件末尾、或用 @import 引入含该规则的外部 CSS
@import 会阻塞关键渲染路径，且部分浏览器延迟执行 @font-face，导致字体请求滞后甚至失效
验证方法：打开 DevTools → Network → Filter “Font”，看是否有字体请求；没请求 = 规则未生效；404 = 路径错；CORS error = 跨域没配

src 路径怎么写才对？不是相对于 HTML，而是 CSS 文件

比如你的 CSS 在 /css/style.css，字体文件放在 /fonts/fa-solid-900.woff2，那 src 必须写成：url('../fonts/fa-solid-900.woff2')，而不是 url('/fonts/fa-solid-900.woff2') 或 url('fonts/fa-solid-900.woff2')。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

绝对路径（/fonts/...）易触发 CORS，尤其本地开发用 file:// 协议时必挂
相对路径基准永远是 CSS 文件所在位置，不是 HTML 页面 URL，也不是服务器根目录
构建工具（如 Vite）默认不重写 url('./...') 中的相对路径，需确认是否启用 assetsInlineLimit 或把字体放 public/fonts/ 目录

font-family 和 format() 写错一个字符就失效

font-family 名称必须严格匹配大小写、引号和空格；format() 的值必须和文件后缀完全一致，否则 Safari / 旧 Android 会静默失败。

声明：@font-face { font-family: 'Font Awesome 6 Free'; src: url('../fonts/fa-solid-900.woff2') format('woff2'); }
调用：.fa-solid { font-family: 'Font Awesome 6 Free'; font-weight: 900; } —— 少引号、大小写错、font-weight 不匹配都会回退
format('woff2') 对应 .woff2 文件，format('truetype') 对应 .ttf，写成 format('ttf') 浏览器直接忽略
只提供一种格式？现代项目至少要 woff2 + woff fallback，否则 iOS Safari 可能不渲染