使用@font-face引入WOFF2格式字体并设置font-display:swap以避免文字闪动；2. 优先选用SVG Sprite或Symbol方式引入图标，避免字体图标延迟；3. 统一管理资源路径，通过构建工具处理引用，提升维护效率；4. 预加载关键字体、子集化字体、压缩SVG并启用长期HTTP缓存，优化加载性能。
在现代网页开发中，合理引入字体与图标不仅能提升视觉体验，还能优化页面加载性能。通过统一管理资源和采用最佳实践，可以有效减少请求、加快渲染速度。
1. 使用 @font-face 正确引入自定义字体
通过 @font-face 规则，可以在CSS中声明自定义字体，确保跨浏览器兼容性。
建议格式：WOFF2（首选）、WOFF、TTF示例：
@font-face {
font-family: 'CustomFont';
src: url('fonts/custom-font.woff2') format('woff2'),
url('fonts/custom-font.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap; /* 避免文字闪动 */
}
关键点：
立即学习“前端免费学习笔记（深入）”；
- 优先使用 WOFF2，压缩率高，兼容现代浏览器
- 设置 font-display: swap 防止FOIT（不可见文本闪烁）
- 将字体文件放在CDN或静态资源服务器上，提升加载速度
2. 图标引入方式对比与选择
常见图标方案包括：Icon Font、SVG Sprite、SVG Symbol 和第三方库（如 Font Awesome）。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
推荐优先级：SVG Sprite 或 SVG Symbol
- SVG 更清晰（矢量），支持颜色控制，体积小
- 避免 Icon Font 的字体加载延迟和语义问题
- 可内联关键图标，减少HTTP请求
若使用 Font Awesome 等库：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">注意：只加载需要的图标模块（如 fas 而非 all），或使用按需打包工具（如 PurgeCSS）
3. 统一资源管理策略
集中管理字体与图标的引用路径和版本，提升维护效率。
- 创建 assets/fonts/ 和 assets/icons/ 目录
- 使用构建工具（如 Webpack、Vite）自动处理资源路径
- 在SCSS变量文件中定义字体族名称，便于全局修改
- 使用 CSS 自定义属性管理常用图标大小、颜色等
4. 性能优化技巧
减少加载时间，提升用户体验。
- 预加载关键字体：
<link rel="preload" href="fonts/custom-font.woff2" as="font" type="font/woff2" crossorigin> - 使用 subsetting（子集化）移除不使用的字形（如仅中文常用字）
- 压缩 SVG 图标，去除冗余元数据（可用 SVGO 工具）
- 合并小图标为雪碧图（Sprite），减少请求数
- 启用 HTTP 缓存：对字体和图标设置长期缓存（Cache-Control: max-age=31536000）
基本上就这些。合理组织资源结构，结合现代工具链，既能保证设计还原度，也能让页面轻快加载。
