CSS文本样式

字体

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也可以直接设定一个整数，如果设定的是整数，那么行高将会是字体大小指定的倍数。
• 通过行高也可以设定行间距，公式：行间距 = 行高 - 字体大小。
• 如果将行高和高度设定为一样的值，那么可以做到让单行文字在元素中垂直居中。