Google Fonts免费字体库

2周前更新 8 0 0

Google Fonts 是由 Google 提供的一个免费的字体库,包含多种不同风格的字体,可用于网页和设计项目。它支持多种语言,并且可以通过简单的链接或 CSS 代码轻松集成到网站中。

收录时间:
2025-03-20
Google Fonts免费字体库Google Fonts免费字体库

Google Fonts 是由 Google 提供的一个免费的字体库,包含多种不同风格的字体,可用于网页和设计项目。它支持多种语言,并且可以通过简单的链接或 CSS 代码轻松集成到网站中。

Google Fonts 的特点

  1. 免费:完全免费使用,无需授权。
  2. 云端加载:无需下载字体文件,直接通过 Google 提供的 CDN(内容分发网络)加载。
  3. 多样化:包含上千种不同的字体,包括衬线字体(Serif)、无衬线字体(Sans-serif)、手写体(Handwriting)、显示字体(Display)等。
  4. 多语言支持:支持多种语言,如中文、日文、韩文、阿拉伯文等。
  5. 可定制:可以选择不同的字体样式、粗细和字形(italic、bold 等)。
  6. 优化性能:Google Fonts 提供了高效的压缩和优化,确保加载速度快。

如何使用 Google Fonts

方法 1:通过 <link> 直接引入

在 HTML <head> 部分添加以下代码:

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

然后在 CSS 文件中使用:

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

方法 2:通过 @import 引入

在 CSS 文件中使用 @import

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

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

方法 3:下载并本地使用

如果担心 Google 服务访问受限,可以下载字体文件并在本地使用:

  1. 访问 Google Fonts 官网,选择所需字体。
  2. 点击“Download family”下载字体文件。
  3. 将字体文件放入项目目录,如 fonts/ 文件夹。
  4. 在 CSS 中引用:
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Regular.woff2') format('woff2'),
       url('fonts/Roboto-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

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

Google Fonts 常见字体推荐

  • Sans-serif(无衬线字体)
    • Roboto(适用于网页正文)
    • Open Sans(简洁现代)
    • Lato(适合 UI 设计)
  • Serif(衬线字体)
    • Merriweather(适合阅读)
    • Playfair Display(优雅大气)
    • Lora(文学感强)
  • Handwriting(手写字体)
    • Pacifico(休闲风)
    • Dancing Script(流畅书法风)
  • Monospace(等宽字体)
    • Source Code Pro(适合代码)
    • Fira Code(支持连字)

注意事项

  1. 国内访问问题:Google Fonts 在中国大陆可能会受到访问限制,可以使用代理或下载字体到本地。
  2. 加载性能:尽量只加载必要的字重(如 400、700),避免影响网页性能。
  3. 字体兼容性:部分字体可能不支持所有浏览器或设备,需要测试。

如果你在中国大陆地区想使用 Google Fonts,可以考虑一些 镜像站

你可以在这些镜像站下载字体文件,并按照本地使用的方法进行安装。

相关导航