5. 文字
5.1 文字常用属性
- font-family：字体类型
- 注意事项：
- 1) 英文（只改变英文） 中文（中、英文都改变）
- 2) 设置多个值时，根据客户端有的字体依次满足（前面优先级更高）
- 3) 设置的值中间有空格时，加''（单引号）
- font-size：字体大小，默认16px
- 字母、数字
- 注意事项：
- 1）字体大小一般为偶数
- font-weight：字体粗细
- normal：正常，默认
- bold：加粗
- 数值：100-500，正常；600-900加粗
- font-style：字体样式
- normal：正常
- italic：斜体，支持斜体的字体会倾斜
- oblique：斜体，不支持斜体的字体也可以倾斜
5.2 衬线体、非衬线体
- 衬线体有笔锋，非衬线体平滑（现在主流）
5.3 font的简写
- font是font-style font-weight font-size/line-height font-family的简写形式
- *顺序不能改变
- *至少指定font-size和font-family才生效
6. 段落
6.1 段落常用属性
- text-decoration：文本装饰
- underline：下划线
- overline：上划线
- line-through：删除线
- none：无
- 注意事项：可以同时添加多个文本装饰
- text-transform：文本大小写
- lowercase：小写
- uppercase：大写
- capitalize：首字母大写
- text-indent：文本缩进
- 数值，首行缩进
- text-align：文本对齐方式
- left：左对齐（默认）
- right：右对齐
- center：中间对齐
- justify：两端点对齐
- line-height：定义行高
- 什么是行高：一行文字的高度，上边距+文字高度+下边距
- 默认行高根据当前字体大小变化
- 取值：数值、比例值（和字体大小相比）
- letter-spacing：定义字间距（每个文字之间、每个字母之间）
- word-spacing：词间距（英文单词之间）
- 解决英文和数字不自动折行：
- word-break: break-all;（非常严格的折行）
- word-wrap: break-word;（不严格的折行）
文字及段落练习
点击查看代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.flex-box{ display: flex; }
.box1,.box2{ flex: 3;text-indent: 32px; }
.box3{ flex: 2; }
/* box1 */
/* box1的后代，p标签，且是第1个孩子 */
.box1 p:nth-child(1){
font-family: 不会被识别, 宋体, 微软雅黑;
font-size: 12px;
}
.box1 p:nth-child(2){
font-weight: 500;
font-style: italic;
}
/* box2 */
.box2 h3{ text-align: center; }
/* box2的后代，第1个p标签-中文 */
.box2 p:nth-of-type(1){ text-decoration: overline; }
.box2 p:nth-of-type(2){ text-decoration: underline; }
.box2 p:nth-of-type(3){ text-decoration: line-through; }
.box2 p:nth-of-type(4){ line-height: 40px;border: 1px solid #f50; }
.box2 p:nth-of-type(5){ border: 1px solid #f50; }
.box2 p:nth-of-type(6){ letter-spacing: 3px; }
.box2 p:nth-of-type(8){ word-spacing: 10px; }
/* box3 */
.box3 h5{ margin: 0;}
.box3 p:nth-of-type(1){ text-transform: capitalize;color: blueviolet;text-indent: 16px; }
.box3 p:nth-of-type(2){ text-transform: uppercase;color: rgb(200, 100, 0);letter-spacing: 3px; }
.box3 p:nth-of-type(3){ text-transform: lowercase;color: rgb(50, 255, 50);word-break: break-all; }
</style>
</head>
<body>
<div class="flex-box">
<!-- 文字 -->
<div class="box1">
<p>font-family字体及其识别过程、font-size字体大小：12px；</p>
<p>font-weight字体粗细：100-500为正常600-900为加粗、font-style字体风格：斜体；</p>
</div>
<!-- 段落 -->
<div class="box2">
<h3>段落对齐方式text-align:center;居中</h3>
<h4>段落修饰：text-decoration: ;</h4>
<p id="1">text-decoration: overline;上划线</p>
<p id="2">text-decoration: underline;下划线</p>
<p id="3">text-decoration: line-through;删除线</p>
<p id="4">行高line-height: 40px;可用于单行文本垂直居中</p>
<p id="5">未设置行高的正常文本</p>
<p id="6">字(母)间距letter-spacing: 3px;对中文有效。</p>
<p id="7">字(母)间距letter-spacing: 3px;对中文有效。（和上述对比文本）</p>
<p id="8">词间距word-spacing:10px;对中文无效</p>
<p id="9">词间距word-spacing:10px;对中文无效（和上述对比文本）</p>
</div>
<!-- 段落 -->
<div class="box3">
<h5>首字母大写：text-transform: capitalize;</h5>
<h5>首行缩进16px：text-indent: 16px;</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores eveniet, aspernatur non placeat repudiandae dolores quod autem perspiciatis, natus rem sit? </p>
<h5>全部大写：text-transform: uppercase;</h5>
<h5>字(母)间距对英文有效：letter-spacing: 3px;</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores eveniet, aspernatur non placeat repudiandae dolores quod autem perspiciatis, natus rem sit? </p>
<h5>全部小写：text-transform: lowercase;</h5>
<h5>强制折行，单词被分开：word-break: break-all;</h5>
<p>Lorem Ipsum Dolor sit, amet consectetur adipisicing elit. Maiores eveniet, aspernatur non placeat repudiandae dolores quod autem perspiciatis, natus rem sit? </p>
</div>
</div>
</body>
</html>
效果预览
