CSS笔记之CSS字体属性

CSS笔记之CSS字体属性

font属性

font-family：字体类型

格式：font-family:字体名;
举例：
结果：

CSS定义的字体是开发者推荐的字体，实际用户可能没有安装该字体，所以可以同时定义多个字体：
{ font-family:字体1, 字体2, 字体3,…;}
浏览器会优先选择前面的字体，如果没有安装，则选下一个；

我们常说的字体，如微软雅黑，Times New Roman等都是指某种特定的字体。
实际中有些字体会有不同的变形，从而产生一个字体系列，font-family也可以直接声明字体系列。
CSS定义了5种通用字体，每种通用字体都具有一些相同的特点

除次之外，CSS字体还可以引入外部字体，图标字体等

• 衬线字体
  特点：字体有上下短线

• sans-serif：非衬线字体；
  特点：字体无上下短线

• monospace：等宽字体
  特点：所有字等宽；

• cursive：草书字体
  特点：模仿手写体；

• fantasy：奇异字体
  特点：无具体特征，有艺术性；

如果不在意具体使用哪种字体，可以选择通用字体类，浏览器会自动选择该类型下的字体；

font-size：字体大小

可选值：

• 像素值：单位px，较为常用
• 相对长度单位：em/rem/%
  1em等于当前元素的font-size值；
  1rem等于根元素的font-size值，浏览器的默认font-size值为16px；
  %是相对于父元素的font-size值进行计算；
• 绝对大小关键字：xx-small，x-small，small，medium，large，x-large，xx-large；
• 相对大小关键字：larger，smaller;

举例：

结果：

font-weight：字体加粗

可选值：

• normal：默认值，正常的字体
• bold：粗体
• bolder：比bold粗
• lighter：比normal细
• 100/200/300/400/500/600/700/800/900：使用数字关键字定义粗细,分为9级。
• 一般400等于normal,700等于bold，但并未定义每一级的加粗程度，会根据字体原有的加粗度进行对应，可能多个级别对应一个加粗程度；
  举例1：
  结果：
  
  举例2：
  
  结果：
  

font-style：字体样式

可选值：

• normal：默认值，正常字体；
• italic：斜体；
• oblique：斜体；

举例：

结果：

除上述属性外

字体变形：font-variant；字体拉伸：font-stretch；

font复合写法

格式：
font:{
font-style;
font-variant;
font-weight;
font-size;
font-family;
}
需要注意如果使用font复合属性的写法，font-size;font-family;属性必须要写，且font-size写在font-family之前;
font-style;font-variant;font-weight;三个属性位置在font-size;font-family之前，但是这三个属性之间的位置顺序不是固定的，这三个属性也可以省略不写；