Google Fonts 谷歌字体的使用

Google Font(免费)

https://fonts.google.com/

上面的链接打不开 可能需要代理

优势：英文字体齐全，所有 Google Fonts 字体都是开源且免费
劣势：中文字体匮乏

无论是看起来很正式的，还是花里胡哨的 他都有：

使用方法

link标签引入

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@500&family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">

@import

vue之类的集成了webpack的项目可以这样引入：

<style>
@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@500&family=ZCOOL+KuaiLe&display=swap');
</style>

指定font-family:

font-family: 'Ma Shan Zheng', cursive;
font-family: 'Noto Sans SC', sans-serif;
font-family: 'ZCOOL KuaiLe', cursive;

这样你的页面上使用了这些字体的文字就会变得优雅起来。

此外，这个网站还提供了大量的icon，也是差不多的引入方式，大家可以自己去查看：

文章到此就结束了，希望可以帮到你。