字体
1. 可配置的属性
color
设置字体颜色。font-size
设置字体大小。font-family
字体的样式,可以同时指定多个样式,中间使用逗号,
隔开,字体会优先使用第一个,如果无法使用则使用第二个,依次类推。font-weight
字体的加粗,可以设置font-weight: bold
来加粗字体等。font-style
字体的风格,可以设置font-style: italic
来设置斜体等。
示例如下:
.font_test {
/* 字体颜色:红色 */
color: red;
/* 字体大小:100px */
font-size: 100px;
/* 字体样式:指定多个,依次选择第一个能用的字体 */
font-family: 'Trebuchet MS', 'Lucida Sans', Arial, sans-serif;
/* 加粗 */
font-weight: bold;
/* 斜体 */
font-style: italic;
}
2. 使用额外的自定义字体
某些字体,电脑中没有安装对应的字体库,可以直接将字体文件导入,然后使用该字体。
示例如下:
@font-face {
/* 指定字体的名字 */
font-family:'my_font' ;
/* 字体的路径 */
src: url('xxxx') format("truetype");
}
.font_test {
font-family: my_font
}
图标字体
行高
通过line-height
来设置行高,行高的说明如下:
- 行高指的是文字占有的实际高度,行高会在字体上下平均分配。
- 行高可以设置
px em
也可以直接设定一个整数,如果设定的是整数,那么行高将会是字体大小指定的倍数。 - 通过行高也可以设定行间距,公式:
行间距 = 行高 - 字体大小
。 - 如果将行高和高度设定为一样的值,那么可以做到让单行文字在元素中垂直居中。