接了一个毕业设计的小兼职,其中有一条要求:
核心字体是14ptCrimsonText,标题和导航栏用Kanit。这些字体都在
googlefont里提供,我们不能假设
用户已经有这些字体了,所以需要实现Fontstack。
google font 是google推出的一款支持高质量的开源字体文件的服务。
包括免费和开源字体系列、用于浏览库的交互式 Web 目录以及用于通过 CSS
和 Android 使用字体的 API。
Google 字体库中的流行字体包括 Roboto、Open Sans、Lato、Oswald、
Montserrat、Source Sans Pro 和 Raleway。
通俗讲一款免费开源在线字体库
简单说一下google font字体的使用
网站地址: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, '微软雅黑';
}