图标不显示主因是@font-face未在首次调用前解析：必须置于CSS开头、路径以CSS文件为基准、font-family与format()严格匹配、必设font-display:swap且各字重需独立声明。
@font-face 必须写在 CSS 文件最开头，否则浏览器直接跳过，图标根本不会加载。
为什么图标不显示？90% 是 @font-face 解析失败
浏览器解析 CSS 时，@font-face 规则必须在首次用到对应 font-family 之前被读取，否则整条规则被忽略——哪怕你后面写了 .fa { font-family: 'Font Awesome 6 Free'; }，也毫无作用。
- 常见错误：把
@font-face塞进<style scoped>（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')。
- 绝对路径（
/fonts/...）易触发 CORS，尤其本地开发用 file:// 协议时必挂 - 相对路径基准永远是 CSS 文件所在位置，不是 HTML 页面 URL，也不是服务器根目录
- 构建工具（如 Vite）默认不重写
url('./...')中的相对路径，需确认是否启用assetsInlineLimit或把字体放public/fonts/目录
font-family 和 format() 写错一个字符就失效
font-family 名称必须严格匹配大小写、引号和空格；format() 的值必须和文件后缀完全一致，否则 Safari / 旧 Android 会静默失败。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 声明：
@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+wofffallback，否则 iOS Safari 可能不渲染
font-display: swap 不是可选项，是防白屏刚需
不加 font-display，Chrome/Firefox 默认行为是 FOIT（Flash of Invisible Text）：字体没加载完，文字干脆不显示，用户看到一片空白几秒。
- 必须写在
@font-face块内部：font-display: swap;，不能放到外部选择器里 -
swap行为：先用系统字体撑开布局，字体就绪后立刻替换（有轻微闪动但不阻塞渲染） - 不要用
optional（字体可能永不加载）或block（强制等待，白屏风险高） - 老版本浏览器（Chrome <49, Firefox <60）忽略该属性，不影响基础功能，但新项目必须加上
最容易被忽略的是：每个字重（400、700、900）和样式（normal、italic）都得单独声明 @font-face 块，复用一个文件加 font-weight: bold 不会生效——浏览器只做精确匹配。
