CSS引入Google Fonts字体方法_外部字体加载与应用-css教程-PHP中文网

CSS引入Google Fonts字体方法_外部字体加载与应用

P粉602998670

发布： 2025-11-16 14:59:02

原创

295人浏览过

推荐使用link标签引入Google Fonts，如Roboto和Open Sans，并通过CSS调用；也可在CSS中用@import方式引入，但性能较差；支持按需加载特定字重如wght@400;700以优化速度；建议设置&display=swap避免文字空白，提升加载体验。

css引入google fonts字体方法_外部字体加载与应用

在网页开发中，使用美观的字体能显著提升用户体验。Google Fonts 提供了大量免费、高质量的开源字体，通过简单的 CSS 引入方式即可在项目中快速应用。以下是几种常见的引入 Google Fonts 字体的方法。

最常用的方式是在 HTML 文件的 <head> 区域添加一个 <link> 标签，指向 Google Fonts 的字体资源。

例如，引入 "Roboto" 和 "Open Sans" 字体：

<link href="https://fonts.googleapis.com/css2?family=Roboto&family=Open+Sans&display=swap" rel="stylesheet">

登录后复制

然后在 CSS 中使用：

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

h1 {
  font-family: 'Open Sans', sans-serif;
}

登录后复制

优点：简单直接，兼容性好，适合大多数项目。

如果希望将字体引入写在 CSS 文件内部，可以使用 @import 指令。

在 CSS 文件顶部添加：

Gnomic智能体平台

国内首家无需魔法免费无限制使用的ChatGPT4.0，网站内设置了大量智能体供大家免费使用，还有五款语言大模型供大家免费使用~

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

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

登录后复制

注意：@import 必须放在 CSS 文件的最开始位置，否则无效。性能上略逊于 link 方式，因为会阻塞 CSSOM 构建。

Google Fonts 支持按需加载指定字重（font-weight）和斜体（italic）等变体，减少不必要的资源加载。

例如，只加载 Roboto 的 400 和 700 字重：

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

登录后复制

CSS 中对应使用：

p {
  font-weight: 400;
}

.bold {
  font-weight: 700;
}

登录后复制

这样可以有效优化页面加载速度。

Google Fonts 链接中的 &display=swap 参数用于控制字体加载期间的文本显示行为。

推荐始终保留 &display=swap，以提升页面可读性和加载流畅度。

基本上就这些。通过 link 引入 + 按需加载 + 合理设置 display，就能高效使用 Google Fonts 字体，让网页排版更出彩。不复杂但容易忽略细节。

以上就是CSS引入Google Fonts字体方法_外部字体加载与应用的详细内容，更多请关注php中文网其它相关文章！

大家都在看：