#谷歌字体库内容丰富,涵盖上千种多语言支持的字体,学习导入谷歌字体库来增加网站的阅读性,是必不可少的一项技能#
1,前往谷歌字体网站
要会魔法,裸连很卡
2, 寻找心仪字体
Googles Fonts下面的filters可以筛选文字,字体库同族字体会支持不同的语言,如果不确定是否支持自己想要的多语言,可以在筛选栏中打入多国语言,对照右侧字体是否正常显示即可。无法显示的字体会呈现问号。这里拿Noto Sans教学
3,进去后 点击右上角的Get font按钮
4,点击会进入自己的字体库
这里会存在所有你点击来过的字体,后续的引用也会全部引入,如果不想引入,需在此删除。点击右侧的使用方法 Get embed code获取代码
5, 选择<link>引入
- 复制’Embed code in the <head> of your html‘的代码 直接塞到index.html中就行了
- 第二个’Noto Sans SC: CSS class for a variable style‘是自定义字体的相关css案例,基本用不到
- 如果想方便可以在左侧选择One Value,只会导入一种粗细的字体
6,然后在你的主css中定义全局字体族即可
// main.css
*{font-family: "Noto Sans SC", sans-serif;
}