CSS非布局样式-字体

本文内容整理于慕课网视频教程

对于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文件，把图标当做字体来引用。具体用法网站有介绍。