字体属性

字体属性详解

font-family属性

font-family属性用于设置字体，示例如下：

font-family: "宋体";

字体可以是列表形式，一般英语字体放到前面，后面的字体是前面的字体的“后备”字体。字体名称中有空格或者为中文，必须用引号包裹。示例如下：

font-family: serif, "Times New Roman", "微软雅黑";

中文字体也可以称呼它们的英语名字，示例如下：

中文字体名	等价的英语字体名
font-family: “微软雅黑”	font-family: “Microsoft Yahei”
font-family: “宋体”	font-family: “SimSun”

我们设置的字体通常必须是用户计算机中已经安装好的字体，所以一般来说设置为微软雅黑和宋体较多，设置成其他字体较少。如果要设置为用户电脑中没有的字体，比如定义一个新字体，这就需要我们有字体文件，用户加载网页的时候，会同时下载这些字体文件。

定义字体

字体文件根据操作系统和浏览器不同，有eot、woff2、 woff、ttf、svg文件格式，需要同时有这5种文件。当我们拥有字体文件之后，就可以用@font-face定义字体。示例代码如下：

@font-face {
  font-family: 'webfont';
  font-display: swap;
  src: url('//at.alicdn.com/t/webfont_eudittefmxt.eot'); /* IE9*/
  src: url('//at.alicdn.com/t/webfont_eudittefmxt.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('//at.alicdn.com/t/webfont_eudittefmxt.woff2') format('woff2'),
  url('//at.alicdn.com/t/webfont_eudittefmxt.woff') format('woff'), /* chrome、firefox */
  url('//at.alicdn.com/t/webfont_eudittefmxt.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('//at.alicdn.com/t/webfont_eudittefmxt.svg#NotoSansHans-DemiLight') format('svg'); /* iOS 4.1- */
}

以上这段代码定义的字体是我从阿里巴巴普惠体网站上复制的。

阿里巴巴提供了一套免费商用授权的普惠字体，网址https://www.iconfont.cn/webfont。使用这些字体省去了下载字体的麻烦。