CSS3中的字体详解

字体

网页字体的三个来源：

• 用户机器上安装的字体，放心使用。
• 保存在第三方网站上的字体，例如Typekit和Google,可以link标签链接到你的页面上。
• 保存在你自己Web服务器上的字体，可以用@font-face规则随网页一起发送到浏览器。

 

字体相关6属性：

font-family

font-size

font-style

font-weight

font-variant

font（简写属性）

难道字体和文本不是一回事？

当然不是。请听我解释。

字体是“文字的不同体式”或者“字的形体结构”。对于英文而言，每种字体都是由一组具

有独特样式的字母、数字和符号组成的。根据外观，字体可以分为不同的类别（font

collection），包括衬线字体（serif）、无衬线字体（sans-serif）和等宽字（monospace）。

每一类字体可以分成不同的字体族（font family），比如Times 和Helvetica。而字体族中

又可以包含不同的字型（font face），反映了相应字体族基本设计的不同变化，例如Times

Roman、Times Bold、Helvetica Condensed 和Bodoni italic。

文本就是一组字或字符，比如章标题、段落正文等等，跟使用什么字体无关。

CSS 为字体和文本分别定义了属性。字体属性主要描述一类字体的大小和外观。比如，使用

什么字体族（是Times，还是Helvitica），多大字号，粗体还是斜体。文本属性描述对文本的

处理方式。比如，行高或者字符间距多大，有没有下划线和缩进。

这就是我对字体和文本之间区别的认识。如果你想让文字加粗，或者变斜体，可以设定字体属性。而行高和缩进这种只有对文本块（比如标题和段落）才有意义的样式，则要使用文本属性设定。

字体族

例如：h2{ font-family:times, serif; }

通用字体：

• serif，衬线字体，每个笔画末端都会有一些装饰线。
• sans-serif，无衬线字体，字符笔画末端没有装饰线。
• monospace，等宽字体，每个字符宽度相等，也叫代码体。
• cursive，草书体或者手写体。
• fantasy，其他类别字体，奇形怪状。

字体大小

h2 { font-size:18px }

大小单位：px,em,百分比。

默认字体大小为16px，也就是1em=16px.

单独讲rem单位：根em, 相对于HTML根元素，一改所有的字体大小都会改。

字体样式

值：italic(斜体)、oblique(斜体)、normal(正常字体，为了消除特殊样式)

字体粗细

值：100,200······900，或者关键字 lighter、normal、bold和bolder。

示例：a { font-weight: bold; }

常用bold和normal.

字体变化，慎用

值：small-caps(小型大写字母)、normal

示例(块引用)：blockquote { font-variant(字体变形):small-caps; }

经常将small-caps用于::first-line伪元素。

简写字体属性

规则一：必须声明font-size和font-family的值。

规则二：所有值必须按如下顺序声明，font-weight,font-style,font-variant不分先后，然后是font-size，最后font-family.

p:nth-child(2) {
    font: bold italic small-caps 2em sans-serif;
}