字体

与字体的有关的属性：

font-family

指定字体的类别，浏览器会自动使用该类别下的字体 font-family ：

• 可以同时指定多个字体，多个字体间使用 ， 隔开；
• 优先使用第一个，第一个无法使用则使用第二个，以此类推；

@font-face

@font-face 将服务器中的字体直接提供给用户去使用：

@font-face { 
  /* 指定字体名字 */    
  font-family: 'myFont1';    
  /* 服务器中字体路径 */    
  src: url('/font/ZCOOLKuaiLe-Regular.woff'),url('/font/ZCOOLKuaiLe-Regular.otf'),url('/font/ZCOOLKuaiLe-Regular.ttf') format('truetype');
  /* 指定字体格式，一般不写 */
}

p {
  font-size: 30px;
  color: salmon;  
  font-family: myFont1;
}

使用 @font-face ：需要注意的问题：

1. 字体加载速度；
2. 字体版权；
3. 字体格式：网站浏览器兼容性；

line height

行高，文字占有的实际高度：

• 可以直接指定一个大小 px / em ；
• 也可以直接为行高设置一个小数（字体大小的倍数）；

行高经常还用来设置文字的行间距： 行间距 = 行高 - 字体大小

🌰 例子：

相关的简写属性

按照顺序： font: font-style font-variant font-weight font-size/line-height font-family; ：

🌰 例子

{
  font: bold small-caps italic 50px 'Courier New', Courier, monospace;
}

文本对齐方式

水平对齐 text-align ：

• left ：左侧对齐；
• right ：右侧对齐；
• center ：居中对齐；
• justify ： 两端适应对齐；

垂直对齐 vertical-align

• baseline 基线对齐；
• top 顶部对齐；
• bottom 底部对齐；
• middle 居中对齐；

🌰 例子：