CSS 字体和文本详解

字体设置

• 如果字体名有空格，使用引号包裹。
• 建议使用常见字体， 否则兼容性不好。
• 字体名称可以用英文，也可以用中文， 推荐使用英文。

示例代码:

运行结果:

字体大小

• 不同的浏览器默认字号不一样，最好给一个明确值(chrome 默认是 16px)
• 可以给 body 标签使用 font-size ，标题标签需要单独指定大小
• 代码中单位 px 忘记写了或者写错了，浏览器会对其进行容错，此时会展示成默认字体大小

注意: 实际上它设置的是字体中字符框的高度，实际的字符字形可能比这些框高或矮

示例代码:

运行效果:

文本颜色

color 属性值的写法:

• 预定义的颜色值(直接是单词) ，例子：color: red;
• 十六进制形式(最常用) ，例子：color: #ff00000;
• RGB 方式，例子：rgb(255, 0, 0);

十六进制形式表示颜色， 如果两两相同，就可以用一个来表示，比如 #ff00ff => #f0f

RGB 是什么
R (red: 红色), G (green: 绿色), B (blue: 蓝色) 的方式表示颜色(色光三原色)，三种颜色按照不同的比例搭配就能搭配出各种不同颜色。以#ff00000为例，前2位代表红色像素点，这个数字越大，红色越深，其它像素点同理，中间2位代表绿色像素点，最后2位代表蓝色像素点。

示例代码:

运行效果:

字体粗细

font-weight 属性设置文本的粗细

font-weight 属性值	描述
normal	默认值，定义标准的字符
bold	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
100 200 300 400 500 600 700 800 900	定义由粗到细的字符，400 等同于 normal，而 700 等同于 bold

示例代码:

运行效果:

字体风格

font-style 属性定义字体的风格

font-style 属性值	描述
normal	默认值，浏览器显示一个标准的字体样式
italic	浏览器会显示一个斜体的字体样式
oblique	浏览器会显示一个倾斜的字体样式

示例代码:

运行效果:

文本对齐&&文本缩进

文本对齐: 控制文字水平方向的对齐
注：不光能控制文本对齐, 也能控制图片等元素居中或者靠右

语法：text-align: [值];

• center: 居中对齐
• left: 左对齐
• right: 右对齐

文本缩进: 控制段落的首行缩进
注：文本的其他行不影响，只有首行缩进

语法：text-indent: [值];

• 单位可以使用px或者em，推荐使用em作为单位，1 个 em就是当前元素的文字大小
• 缩进可以是负的，表示往左缩进

示例代码:

运行效果:

文本装饰

语法：text-decoration: [值];

常用取值:

• underline 下划线(常用)
• none 什么都没有，不过可以给a标签/超链接标签去掉下划线
• overline 上划线(不常用)
• line-through 删除线(不常用)

示例代码:

运行结果:

行高

行高指的是上下文本行之间的基线距离

语法: line-height: [值];

示例代码:

运行结果: