目录
一、字体属性
字体类样式前面已经学习过字号 font-size、字体 font-family 两个属性，接下来还有几个常用的字体属性。
1. 字体粗细 font-weight
- 作用：设置文字是否加粗显示。
- 属性名：font-weight，属于 font 属性的一个单一属性。
- 属性值有两种方式：单词类型、数字类型。
单词类型
<style>
.demo {
font-weight: bold;
}
</style>数字类型
100-900 之间的整百数字。
数字越大，文字显示越粗。
其中 400 等价于 normal，700 等价于 bold。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.demo {
font-weight: 800;
}
</style>
</head>
<body>
<p class="demo">观察文字是否加粗</p>
<b>文字加粗</b>
</body>
</html>平常使用较多的是单词类型中的 normal 和 bold。
2. 字体风格 font-style
- 作用：设置文字是否斜体显示。
- 属性名：font-style，属于 font 属性的一个单一属性。
- 属性值： 单词。
后面两个 italic 和 oblique 非常类似，日常使用也不去深究细节，可以稍微理解一下。现在的浏览器中二者的显示没有很大区别了，因为如果有的英文字体没有设置成 italic 这种斜体，就会强制加载 oblique 这种倾斜字体，而 oblique 加载过程中如果没有专门设置用来倾斜的字体，也会按照 italic 进行加载，二者互相串联，真正展示出的结果类似。
实际应用中，更多的斜体效果习惯使用italic属性值。
从上面示例中可以看到，无论是中文文字还是英文，italic 和 oblique 都非常类似。
给这三段文字加上相同的英文字体 consolas 字体：
运行结果：其中第一行显示正常的文字字体，第二行就是 consolas 自己的斜体样式，第三行中因为 consolas 字体中并没有设置倾斜体所以强制加载了 italic 。
注意：之前学的 i 标签就是 italic 形式。
3. 行高 line-height
行高基础
设置文字大小为 14 像素，但这些 14 像素的文字真正占有的高度并不是 14 像素，而是比 14 像素要多，因为有行高。真正决定文字占有高度的属性就是行高。
示例：设置 div 标签中文字为14 px，打开控制台看到 div 的高度是19.2，是比14 要多得，这就与默认行高有关。
- 行高作用：设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中显示的。
- 属性名：line-height，属于 font 属性的一个单一属性。
- 属性值：px像素值、百分比数值。
-
属性值 说明 px像素值 设置的行高的具体像素值，设置14px就是14的行高 百分比数值 设置的本身文字加载字号像素值的百分比，例如文字设置为14px，则100%就是14px，200%就是28像素。 <style> div { font-size: 14px; line-height: 26px; line-height: 200%; } </style>实际应用中，行高的数值通过设计图获取，如果设计师将数据列出就按照给的数据书写，但如果设计师没有给出具体数据，就需要自己用一定手段量取文字打的字号、行高等数值，量取数值时需要使用一些辅助软件工具。
量取软件——Fireworks软件
Fireworks 软件是 Adobe 公司的一款软件，叫作 Adobe Fireworks。
图片尺寸不方便测量时，按 ctrl + “+” 放大，ctrl +“-” 缩小。
量取行高的步骤
第一步：确定文字字号和字体。首先确定字体，常用字体就两个，一个是微软雅黑，一个是宋体，开始时可以进行猜测。使用文字工具，书写两个（至少两个文字）与内容相同的文字，调整字号和字体，直到两个文字都完全重合，就是我们需要的字号和字体。制作时，设 置一个与内容文字颜色差异较大的字体颜色。
第二步：根据已知的字号和字体，再书写上下对齐的两行文字，调整属性面板的行 高值单位为像素，更改数值大小，直到两行文字都对齐，得到的就是我们需要的行 高值。
4. 字体综合
字体、字号、行高、加粗、斜体都是font综合属性的单一属性。
font属性五个单一属性的值可以进行合写，属性值可以有2到多个，值之间用空格进行分隔。
写法1——字号字体合写
font进行综合书写时，必须有字号和字体参与，而且必须字号在前，字体在后，不能 颠倒顺序。
<style>
p {
font: 14px "宋体";
}
</style>写法2——字号行高字体合写
font属性经常对字体、字号、行高进行合写，书写顺序必须是字号、行高、字体，字号和行高之间必须用/进行分隔。
<style>
p {
font: 14px/28px "宋体";
}
</style>写法3——五个合写
如果font属性需要设置加粗和斜体，两个属性值只能写在最前面，两个值之间可以互 换位置。后面的字号、行高、字体不能更改位置。
<style>
p {
font: bold italic 14px/28px "宋体";
}
</style>二、文本属性
文本类样式我们已经学习过颜色 color 属性，严格来说行高 line-height 也是文本类属性，由于其可以合写在 font 属性中，暂时先归类到字体中学习，接下来还有几个常用的文本属性。
1. 水平对齐 text-align
- 作用：设置文本水平方向的对齐。 在盒子中，不论文本是单行还是多行，都会对应方向对齐。
- 属性值：三个方向的单词
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
width: 200px;
height: 200px;
background-color: pink;
text-align: center;
}
</style>
</head>
<body>
<p>一堆文字</p>
</body>
</html>默认是水平居左，即不设置 text-align 时文本左对齐，如果想要左对齐就可以不设置此属性。
2. 文本修饰 text-decoration
作用：设置文本整体是否有线条的修饰效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.none {
text-decoration: none;
}
.over {
text-decoration: overline;
}
.through {
text-decoration: line-through;
}
.under {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="none">没有线条</div><br>
<div class="over">上划线</div><br>
<div class="through">中划线</div><br>
<div class="under">下划线</div><br>
<del>删除线与中划线效果相同</del><br>
<a>超级链接与下划线效果相同</a>
</body>
</html>
对于超链接 a 标签，如果想消除下划线，可以给 a 标签设置text-decoration: none; 。
3. 文本缩进 text-indent
作用：设置段落首行是否进行缩进。
em 是一个倍数，自动参考一个文字的宽度，若设置为 2em ，即缩进 2 个文字的宽度。 好处就是：文字变大，缩进会跟着变大；文字变小，缩进会跟着变小。
<style>
text-indent: 20px;
text-indent: 2em;
text-indent: 30%;
</style>
实际工作中，最常使用 em 为单位的属性值。
属性值区分正负，正数表示向右缩进，负数表示向左缩进。
2971
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
