本文内容整理于慕课网视频教程
对于CSS中的字体属性(font-family),有几个方面的知识需要了解。
一:字体的分类
有两个类型的名称可用于分类字体:
- 字体族名称(family-name)
- 族类名称(generic family)。
字体族名称(family-name)
- 字体族名称(就是我们通常所说的“字体”)的例子包括“Arial”、“Times New Roman”、“宋体”、“黑体”等等。
族类(generic family)
- 一个族类是一组具有统一外观的字体族。比如:
- serif (衬线字体),指的是在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同,像宋体。
- sans serif (无衬线字体),正相反,就没有那些额外的装饰,而且笔画的粗细差不多,像黑体。
- monospace(等宽字体),每一个字母占用的空间是一样的,一般在写代码、编程的时候会用等宽字体。
- cursive(手写体),在一些宣传上会用到,网页中用的比较少。
- fantasy(花体),一般指英文中那些写法华丽、花哨的字体。
- 字体族不代表一个具体的字体,当指定一个字体族时,是从中找一种出来显示。
二:多字体fallback(实现多平台下的字体的适配)
CSS属性font-family的作用是设置一组按优先级排序的字体列表,如果该列表中的第一个字体未在访问者计算机上安装,那么就尝试列表中的下一个字体,依此类推,直到列表中的某个字体是已安装的。比如:font-family:"Times New Roman",Georgia,Serif;
所以,一般在给出字体列表时,自然应把首选字体放在前面、把候选字体放在后面。建议在列表的最后给出一个族类(generic family),这样,当没有一个指定字体可用时,页面至少可以采用一个相同族类的字体来显示。
三:网络字体、自定义字体
在CSS中,可以使用@font-face
属性来实现自定义字体。具体的用法如下:
@font-face {
font-family: "myfont"; //定义字体名字
src: url("./IndieFlower.ttf"), url(./IndieFlower.eot); //通过src: url(...)引入下载好的字体。
}
body {
font-family: myfont; //然后使用方式跟引用本地字体一样,用font-family属性来完成引用。
}
字体免费下载网站:Font Squirrel、defont.com
这里有一个格式问题,一般下载的字体格式多为otf和ttf,IE浏览器没法兼容,这时需要转换字体格式为eot,可以在这个网站进行转换:Webfont Generator
除了下载字体文件引用以外,还可以直接引用一个远程的CSS,通过<link>
标签来完成,如下:
<link rel="stylesheet" href="http://www.xxxx.com/xxx.css"/>
四:iconfont
iconfont这里有一个图标网站,支持各种图标的下载,下载完成后,可以根据其提供的CSS文件,把图标当做字体来引用。具体用法网站有介绍。