CSS 实用工具: Google Fonts API 引入免费字体库

最新推荐文章于 2022-08-04 09:22:50 发布

超悠閒

最新推荐文章于 2022-08-04 09:22:50 发布

阅读量5.1k

点赞数 2

分类专栏： HTML & CSS 文章标签： css 前端 font family google api

本文链接：https://blog.csdn.net/weixin_44691608/article/details/121019327

版权

HTML & CSS 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何利用Google Fonts API在CSS中便捷地引入和使用免费字体库，包括如何选择字体、导入代码示例和资源链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS 实用工具: Google Fonts API 引入免费字体库

正文

今天给大家分享一个有趣的工具，写 Web 的时候常常找不到有什么字体是好看的或是要一直去找。本篇将给大家介绍一个免费的字体库，由 Google 提供的 API

1. Google Fonts 使用

地址：https://fonts.google.com/

首先点击去上面那个网站

将会看到有很多字体可以选择，点进去你想要的字体

然后点击 select this style，你可以一次选中多个字体，然后在代码中一次导入

接下来在右侧选择 @import 复制下面的内容到 css 如下

@import url('https://fonts.googleapis.com/css2?family=Space+Mono&family=Trispace&family=Zen+Antique+Soft&display=swap');

2. 在代码中引入字体 & 效果

最后你就可以在你的 css 文件中使用想相关字体了

index.css

@import url('https://fonts.googleapis.com/css2?family=Space+Mono&family=Trispace&family=Zen+Antique+Soft&display=swap');

.font1 {
  font-family: 'Space Mono', monospace;
}

.font2 {
  font-family: 'Trispace', sans-serif;
}

.font3 {
  font-family: 'Zen Antique Soft', serif;
}