css引入字体文件的方法有哪些

在CSS中引入字体文件的方法主要有以下几种，适用于不同场景和需求：

1. 使用 @font-face 规则引入自定义字体

这是最常用的方式，允许加载自定义字体文件并通过 font-family 引用。

基本语法：@font-face { font-family: 'MyCustomFont'; src: url('fonts/myfont.woff2') format('woff2'), url('fonts/myfont.woff') format('woff'); font-weight: normal; font-style: normal;}body { font-family: 'MyCustomFont', sans-serif;}
关键点：
推荐格式：优先使用 WOFF2（压缩率高，兼容现代浏览器），同时提供 WOFF、TTF 或 EOT 增强兼容性。
跨域问题：字体文件需与网页同源，或通过服务器配置 CORS 允许跨域访问。
适用场景：需要完全控制字体样式或使用非公开字体时。

2. 使用在线字体服务（如 Google Fonts）

通过链接外部字体服务快速引入，无需自行托管文件。

方法一：HTML 中引入<link href="
https://fonts.googleapis.com/css2?family=Roboto&display=swap"
rel="stylesheet">
方法二：CSS 中使用 @import@import url('
https://fonts.googleapis.com/css2?family=Roboto&display=swap'
);
使用方式：body { font-family: 'Roboto', sans-serif;}
优点：
简单快捷，适合主流字体。
自动处理多格式兼容和性能优化（如自动选择 WOFF2）。
适用场景：快速集成常用字体，无需关心文件管理。

3. 使用系统字体（无需引入文件）

直接调用用户设备已安装的字体，无需加载外部文件。

示例：body { font-family: 'Arial', 'Helvetica', sans-serif;}
系统通用字体关键字：
sans-serif：无衬线字体（如 Arial）。
serif：衬线字体（如 Times New Roman）。
monospace：等宽字体（如 Courier New）。
优点：
零加载时间，性能最优。
适用场景：对字体样式无特殊要求，或需优先保证加载速度时。

4. 结合 font-display 优化加载行为

配合 @font-face 使用，控制字体加载期间的文本显示方式，避免长时间空白。

示例：@font-face { font-family: 'MyCustomFont'; src: url('fonts/myfont.woff2') format('woff2'); font-display: swap; /* 允许备用字体先显示 */}
常见值：
swap：立即显示备用字体，自定义字体加载完成后替换。
block：短暂隐藏文本，避免字体切换导致的布局闪动。
fallback：平衡策略，超时后显示备用字体。
适用场景：需优化用户体验，避免因字体加载导致的页面抖动。

选择建议

根据项目需求灵活选择方案，可组合使用（如 @font-face + font-display）以达到最佳效果。

热门标签