通过结合@font-face与媒体查询实现按需加载字体，提升性能。首先用@font-face定义字体并设置font-display:swap避免文本空白；然后利用媒体查询限定字体仅在桌面端等特定设备加载，移动端使用系统字体；再通过unicode-range按语言子集分割，使浏览器只下载所需字符；最后可结合JavaScript动态检测网络、设备性能或用户偏好，控制字体加载时机。核心是“按需加载”，减少请求，优化速度同时保留设计美感。
网页字体是提升设计质感的重要元素，但加载整个字体文件会拖慢页面速度。通过结合 @font-face 和 媒体查询，可以实现按需加载字体，只在必要时请求资源，从而优化性能。
使用 @font-face 定义字体
在 CSS 中，先用 @font-face 注册字体，但不要立即全局应用。可以通过设置不同的 font-family 名称或配合 自定义属性 来控制何时加载。
例如：
@font-face {
font-family: 'CustomFont';
src: url('custom-font.woff2') format('woff2');
font-display: swap;
}
font-display: swap 确保文本不会因字体未加载而长时间空白，提升用户体验。
通过媒体查询按设备加载
不是所有设备都需要高权重或装饰性字体。可在媒体查询中限定字体的使用范围，让小屏幕设备跳过复杂字体，使用系统字体代替。
立即学习“前端免费学习笔记（深入）”；
示例：仅在桌面端加载装饰字体
@media (min-width: 768px) {
h1 {
font-family: 'CustomFont', sans-serif;
}
}
移动端保持使用系统默认字体，减少请求和渲染压力。
按语言或字符集分割字体
如果网站支持多语言，可通过 unicode-range 实现子集化加载。浏览器只会下载当前页面所需字符对应的字体部分。
例如：为中文单独定义字体子集
@font-face {
font-family: 'ChineseFont';
src: url('font-chinese.woff2') format('woff2');
unicode-range: U+4E00-9FFF;
}
英文用户访问时，这部分字体不会被请求，节省带宽。
动态加载与 JavaScript 配合（进阶）
更精细的控制可结合 JavaScript 检测设备性能、网络状况或用户偏好，再动态注入包含特定 @font-face 的样式表。
常见策略包括：基本上就这些。合理利用媒体查询和 @font-face 的特性，能有效减少不必要的字体加载，提升页面性能，同时保留视觉设计的完整性。关键在于“按需”——只在真正需要时才触发字体请求。
