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: [值];
示例代码:
运行结果: