CSS引入字体的4种方法详解

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《CSS引入字体文件的几种方式如下：@font-face 规则 这是最常用的方法，通过 @font-face 定义字体，然后在样式中使用。@font-face { font-family: 'MyFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); } body { font-family: 'MyFont', sans-serif; }Google Fonts（外部链接） 通过 Google Fonts 提供的链接直接引入字体。然后在 CSS 中使用：body { font-family: 'Roboto', sans-serif; }Web 字体服务（如 Adobe Fonts、Typekit） 类似于 Google Fonts，通过第三方平台引入字体。本地字体（通过 URL 引入） 将字体文件放在项目目录中》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

使用@font-face引入自定义字体，推荐WOFF2格式并注意跨域；2. 通过Google Fonts等在线服务快速加载；3. 调用系统字体无需引入文件；4. 结合font-display优化加载行为。根据需求选择方案。

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

1. 使用 @font-face 规则

@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）

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

方法二：在 CSS 中使用 @import

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

使用方式：

body {
  font-family: 'Roboto', sans-serif;
}

• 简单快捷，适合主流字体。
• 自动处理多格式兼容和性能优化。

3. 使用系统字体（不真正“引入”文件）

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

body {
  font-family: 'Arial', 'Helvetica', sans-serif;
}

• sans-serif：无衬线字体
• serif：衬线字体
• monospace：等宽字体

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，追求便捷可用 Google Fonts，注重性能可结合 font-display 优化加载体验。

今天关于《CSS引入字体的4种方法详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！