免费!!!好看又漂亮的GoogleFont字体库

1,462 阅读1分钟

接了一个毕业设计的小兼职,其中有一条要求:
核心字体是14ptCrimsonText,标题和导航栏用Kanit。这些字体都在 googlefont里提供,我们不能假设 用户已经有这些字体了,所以需要实现Fontstack。

google font 是google推出的一款支持高质量的开源字体文件的服务。 包括免费和开源字体系列、用于浏览库的交互式 Web 目录以及用于通过 CSS 和 Android 使用字体的 API。 Google 字体库中的流行字体包括 Roboto、Open Sans、Lato、Oswald、 Montserrat、Source Sans Pro 和 Raleway。
通俗讲一款免费开源在线字体库

简单说一下google font字体的使用 407c47554d1d8ddd3af611e6d4350ef.jpg 网站地址:code.google.com/apis/webfon…
字库地址:www.google.com/webfonts

以常用的import方式引入为例:
1.打开字库地址,搜索找到需要的字体,选择该字体版本,加粗、斜体等
2.点击右侧加号,此时改字体会进入你的选择中,点击头部最右侧图标展 开选择引入方式(@import),复制style中代码
3.在自己的css中引入字体,需要用到的元素中添加 对应的 font-family, 注意:第二个字体为官方提供的备选字体不可删,以防在线字体引入失败使用, 可以新增其他备选字体

使用 @font-face

@font-face {
 font-family: 'Kanit';
 font-style: normal;
 font-weight: normal;
 src: url('https://fonts.googleapis.com
 /css2?family=Kanit&display=swap');
}
div{
 font-family: 'Kanit', sans-serif, '微软雅黑';
}