-
字体相关属性
-
font-size 字号大小
-
| 相对长度单位 | 说明 |
|---|---|
| em | 相对于当前对象文本内的字体的尺寸 |
| px | 像素，最常用，推荐用 |
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 点 |
| 绝对长度 | -------- |
关于长度单位em 请参考https://www.w3cplus.com/css/px-to-em
-
font-family 字体
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体
.fontsize{
font-size: 14px
}
.fontfamily{
font-family:"隶书","微软雅黑"
}
<span class="fontsize">
century 世纪
</span>
<hr>
<span class="fontfamily">
dramatic 戏剧性的 激动人心的
</span>
文本效果：
image.png
(1)现在网页中普遍使用14px+。
(2)尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
(3)各种字体之间必须使用英文状态下的逗号隔开。
(4)中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
(5)如果字体名中包含空格、#、$等符号，则该字体必须加英文状 态下的单引号或双引号，例如font-family: "Times New Roman";。
(6)尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
(7)在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。解决类似问题可以使用
方案1：使用英文来替代。 比如 font-family:“Microsoft Yahei”。
方案2:在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。font-family: “\5FAE\8F6F\96C5\9ED1”，表示设置字体为“微软雅黑”。
（7）可以使用escape()方法来测试字体。
（8）各种字体对照表
| 字体名字 | 英文名称 | Unicode |
|---|---|---|
| 宋体 | SimSun | \5B8B\4F53 |
| 新宋体 | NSimSun | \65B0\5B8B\4F53 |
| 黑体 | SimHei | \9ED1\4F53 |
| 微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
| 隶书 | LiSu | \96B6\4E66 |
| 幼园 | YouYuan | \5E7C\5706 |
| 华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 细明体 | MingLiU | \7EC6\660E\4F53 |
| 新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |
-
字体粗细
由font-weight决定 可以使用的范围是100-900 其中 400等价于normal ；700 等价于bold ，也可以直接使用 normal bold bolder lighter 等属性 一般使用数字表示
.textweight{
font-weight: bold;
}
.textweight{
font-weight: 700;
}
效果：
image.png
-
字体风格
由font-style 设置字体风格，可用的字体风格
| 属性值 | 描述 |
|---|---|
| normal | 默认值 |
| italic | 斜体字样 |
| oblique | 倾斜字样 |
1.平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。
<span class="textitalic">
peak 山尖 憔悴
</span>
效果：
image.png
-
字体综合设置
font属性用于对字体样式进行综合设置，其基本语法格式如下：
选择器{font: font-style font-weight font-size/line-height font-family;}
.textsynthesis{
font: italic 700 40px "隶书"
}
<span class="textsynthesis">
figure 人物 描绘
</span>
- 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
- 注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
以上效果代码效果如下
image.png
-
文本颜色
color 属性用于定义文本颜色
<span class="textcolor">
firm 牢固的
</span>
.textcolor{
color: rgb(255,0,0);
}
效果
image.png
color属性用于定义文本的颜色，其取值方式有如下3种：
1.预定义的颜色值，如red，green，blue等。
2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。
3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。
-
行间距
ne-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px，一般情况下，行距比字号大7.8像素左右就可以了。
-
水平对齐方式
left：左对齐（默认值）
right：右对齐
center：居中对齐
是让盒子里面的内容水平居中， 而不是让盒子居中对齐
-
首行缩进
text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度
网友评论