CSS的font-face规则允许网页加载自定义字体突破系统字体限制实现跨平台视觉一致性。其核心语法包含font-family自定义字体名、src字体文件路径、font-weight字重等属性支持WOFF2/WOFF等格式。配合font-display:swap策略可优化性能确保文字内容即时显示避免加载延迟。实际应用中需注意字体子集化、按需加载等技巧平衡设计自由度和网页性能。该技术是现代网页实现品牌字体、多语言支持的关键方案同时需兼顾SEO和用户体验指标。font-facefont-face是 CSS 中的一个规则at-rule它允许网页使用服务器上的自定义字体文件而不必依赖用户操作系统中预装的字体。简单来说它让设计师可以在网页上使用任何想要的字体包括付费商业字体、公司品牌字体、或免费开源字体只要用户能下载到字体文件就能正常显示。1. 为什么需要font-face在没有font-face之前网页只能用用户电脑上已安装的字体比如WindowsArial、微软雅黑、宋体macOSHelvetica、PingFang这导致跨平台、跨设备时网页视觉效果差异很大。font-face的出现解决了这个问题。2. 基本语法font-face { font-family: MyCustomFont; /* 自定义字体名称后面引用时用这个 */ src: url(fonts/myfont.woff2) format(woff2), /* 字体文件路径 */ url(fonts/myfont.woff) format(woff); /* 降级方案 */ font-weight: normal; /* 字重 */ font-style: normal; /* 样式 */ font-display: swap; /* 加载策略 */ }定义之后就可以像普通字体一样使用了body { font-family: MyCustomFont, Arial, sans-serif; }3. 各个属性的作用属性作用示例font-family给这个自定义字体起一个名字供后续 CSS 引用MyFont、PingFang SCsrc指定字体文件的路径和格式。可以写多个浏览器会按顺序选择支持的格式url(font.woff2) format(woff2)font-weight定义这个字体文件对应的是哪个字重普通、粗体等normal、bold、400、700font-style定义这个字体文件对应的是正常还是斜体normal、italicfont-display控制字体加载期间的渲染行为swap、block、fallback、optionalunicode-range指定该字体只用于哪些 Unicode 字符常用于按语言或符号拆分字体U4E00-9FFF仅中文4. 实际应用场景场景 1使用 Google Fonts 等第三方字体实际上 Google Fonts 底层就是生成font-face规则/* 从 Google Fonts 加载 Noto Sans */ import url(https://fonts.googleapis.com/css2?familyNotoSans:wght400;700displayswap);它内部展开后类似font-face { font-family: Noto Sans; src: url(https://fonts.gstatic.com/.../NotoSans-Regular.woff2) format(woff2); font-weight: 400; font-display: swap; }场景 2加载本地字体文件自托管很多公司为了性能或隐私考虑会把字体文件放在自己的服务器上font-face { font-family: BrandFont; src: url(/fonts/brand-regular.woff2) format(woff2); font-weight: 400; font-display: swap; } font-face { font-family: BrandFont; src: url(/fonts/brand-bold.woff2) format(woff2); font-weight: 700; font-display: swap; }场景 3按需加载不同语言的字体优化性能font-face { font-family: MyFont; src: url(latin.woff2) format(woff2); unicode-range: U0000-00FF; /* 只加载拉丁字母 */ } font-face { font-family: MyFont; src: url(chinese.woff2) format(woff2); unicode-range: U4E00-9FFF; /* 只加载中文 */ }这样用户访问英文页面时只下载英文字体不下载中文字体节省流量。5. 常见的字体格式格式特点浏览器支持WOFF2压缩率最高体积最小首选格式现代浏览器全面支持WOFF兼容性比 WOFF2 稍好IE9、所有现代浏览器TTF / OTF体积较大未经压缩老浏览器兜底用EOT微软专属格式仅 IE已基本淘汰SVG体积大渲染慢iOS 早期版本已淘汰推荐写法WOFF2 优先WOFF 兜底。src: url(font.woff2) format(woff2), url(font.woff) format(woff);6.font-face与性能使用font-face会带来额外的网络请求和下载开销需要注意体积控制中文/日文等 CJK 字体动辄几 MB建议使用字体子集化只保留页面用到的字符加载策略配合font-display: swap避免文字不可见预加载关键字体使用link relpreload提前加载只加载需要的字重不要一次性加载400、500、600、700四个文件按需加载7. 总结问题答案font-face是什么CSS 规则用于在网页中加载和使用自定义字体文件核心作用打破“只能用系统字体”的限制实现跨平台视觉一致性常用属性font-family、src、font-weight、font-display性能要点使用 WOFF2 格式、配合swap、做字体子集化、按需加载font-facefont-display: swap是现代 Web 字体加载的标准搭配既保证了设计自由度又兼顾了用户体验和性能。font-display: swap;是 CSS 中font-face规则的一个属性它控制自定义字体的加载行为对网页性能尤其是LCP最大内容绘制和用户体验有显著影响。简单来说它的核心逻辑是先让文字立即用系统默认字体显示等自定义字体下载完成后再“无感”地替换掉。1. 它是如何工作的使用swap时浏览器的渲染流程如下立即渲染FOUT浏览器检测到文字需要显示但自定义字体还没下载完。此时不会等待直接使用备用的系统字体如 Arial、Helvetica渲染出文字。替换几毫秒或几秒后自定义字体下载完成。重绘浏览器将已经显示的文字“换装”替换为自定义字体。2. 为什么要用swap在没有设置font-display或设置错误时浏览器默认会有FOITFlash of Invisible Text不可见文本闪烁。即浏览器在下载字体时通常最多 3 秒会让文字完全消失透明。如果网络慢用户会看到几秒钟的白屏或空白区域然后文字才突然出现。使用swap后用户会立即看到文字虽然一开始不是设计师想要的艺术字体但至少保证了内容的可读性解决了“文字延迟出现”的糟糕体验。3. 代码示例font-face { font-family: MyCustomFont; src: url(myfont.woff2) format(woff2); font-display: swap; /* 关键设置 */ } body { font-family: MyCustomFont, Arial, sans-serif; }4.font-display的其他选项对比为了帮助你理解为什么swap是最常用的策略这里列出其他几个选项值行为适用场景swap立即显示备用字体加载完成后替换。绝大多数场景。兼顾了阅读体验和最终视觉效果。block先隐藏文字最多3秒如果3秒内没加载完才显示备用字体。很少用。会导致文字延迟出现影响 LCP。fallback极短时间隐藏约100ms如果还没加载完则使用备用字体。如果备用字体已显示之后不再替换。性能优先。防止网络慢时出现“闪烁式替换”。optional极短时间检查字体是否在缓存中。如果不在则永远使用系统字体且浏览器可以随时取消下载以节省流量。极度性能敏感或非品牌强相关的字体。5. 对 SEO 和 Core Web Vitals 的影响在 Google 的 Core Web Vitals核心网页指标中LCP最大内容绘制是非常关键的评分项。如果没有font-display: swap如果最大内容的元素是文字通常是标题浏览器会等待字体下载导致 LCP 时间延长影响搜索排名和用户体验。如果使用swap最大内容元素会立即被绘制使用备用字体LCP 时间通常较短有利于 SEO。6. 需要注意的副作用FOUT使用swap最大的缺点是FOUTFlash of Unstyled Text样式未生效文本闪烁。用户会先看到系统字体的文字过一会突然“跳”成自定义字体。缓解策略使用preload预加载对于首屏最重要的字体如标题字体使用link relpreload hrefmyfont.woff2 asfont crossorigin提前加载缩小“先显示 Arial后显示自定义”的时间差。调整后备字体选择与自定义字体在宽度、高度上接近的系统字体如system-ui减少字体切换时的布局偏移CLS累计布局偏移。总结font-display: swap是 Web 性能优化的最佳实践它牺牲了“视觉一致性”的短暂时间换取了“内容可读性”的绝对稳定是目前解决自定义字体加载问题最主流的方案。