推荐用引入阿里IconFont最新CDN地址，避免旧域名和时间戳缓存问题；离线需同步下载CSS与字体文件并校验路径；class名须与生成配置一致，Symbol方式需确保定义在全局DOM且href正确；高DPI模糊应调font-size而非transform，并补充aria属性。
如何在网页中正确引入 IconFont 的 CSS 文件
直接用 @import 或 引入官方提供的 CSS 地址是最常见做法，但容易忽略 CDN 域名变更和跨域限制。阿里 IconFont 控制台生成的链接默认带 ?t=xxx 时间戳参数，本地开发时若缓存未刷新，可能加载旧图标。
- 推荐用
，不要复制控制台里带https://g.alicdn.com/...的旧地址（已逐步停用） - 如果项目走内网或需离线，下载
iconfont.css和iconfont.woff2等字体文件，确保 CSS 中src: url('iconfont.woff2')路径与实际存放位置一致 - 避免在
标签里用@import，它会阻塞渲染且不支持 preload
class 名写错导致图标不显示的典型表现
图标没出来，但控制台无报错，元素上明明写了 class="iconfont icon-user" —— 这大概率是 class 名和字体文件不匹配。IconFont 生成的 class 前缀、图标名都依赖项目配置，不是固定写死的。
- 检查控制台 Elements 面板，确认元素是否真有该 class；再看 computed 样式里有没有
font-family: 'iconfont'生效 - 打开
iconfont.css源文件，搜索.icon-user，确认定义是否存在；若用的是 Symbol 引入方式，则 class 名完全无效 - 多人协作时，有人删了图标又没重新下载字体文件，
icon-user可能还在 HTML 里，但 CSS 里已不存在对应声明
Symbol 方式使用
Symbol 方式本质是把图标定义为内联 SVG 引用。看似现代，但对路径、作用域、加载时机极其敏感。
动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版
下载
动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包
-
href必须写成href="#icon-user"，不能是href="/static/iconfont.svg#icon-user"（除非用加载且兼容性差） - SVG
，得等定义节点挂载完成 - Vue/React 组件中直接写
很可能失效，因为 #id 在组件沙箱里找不到全局定义；应改用并确保 SVG 定义在 document.body 最外层
字体图标在高 DPI 屏幕下模糊？别怪 IconFont
字体图标本质是矢量，理论上不该模糊。出现锯齿或发虚，90% 是浏览器渲染策略或 CSS 干预导致的。
- 禁用
transform: scale()或zoom改变图标大小，这会让字体栅格化；改用font-size控制尺寸 - 避免给图标元素设
line-height: 1或vertical-align: middle以外的值，否则 baseline 偏移会导致渲染错位 - 部分 Chrome 版本对
font-smooth和-webkit-font-smoothing敏感，可加text-rendering: optimizeLegibility缓解，但非根治
真正难搞的是图标语义缺失和屏幕阅读器支持——这不是 IconFont 的问题，是你没加 aria-hidden="true" 或用 补充说明。这点上线前很容易漏。
