今天为大家介绍一下关于字体的相关知识，这里的知识比较简单，因为之前的教学中我们已经接触到了一部分关于字体的知识，在这里我来汇总说一下。
1.长度单位：
长度单位就是你的字体在网页中占用的长度是多少，在web中不是用现实中的米或者厘米来度量长度的，下面我来介绍一下四种在web中使用到的长度单位：
1.像素 px
屏幕上的一个个小点，正常情况下，我们看不到的，要放到最大，
也是最常用的长度单位，基本上后面用的全是px设定固定长度；
2.百分比 %
设置的百分比，是父元素内容区长度的百分比，是相对单位，在设计项目中经常会使用到；
3.em
相对单位，相对于当前元素的字体大小设置长度，若当前元素没有设置字体大小，
就会继承祖先元素的字体大小，直到继承html的默认字体大小，
html默认的字体大小是16px，也就是1em=1个font-size；
4.rem
相对单位， 只相对于根元素根标签的字体大小进行设置；
也就是1rem=html的1个font-size，多用于移动端的布局。
用最基本的px像素单位给大家举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
p {
font-size: 50px;
}
</style>
</head>
<body>
<p>我是一行普通的文字</p>
</body>
</html>我们来吧p标签内部的文字像素改为50px，运行结果如下：
可以看到p标签包裹的文字字体变得比平常大很多。
2.颜色的单位：
在网页中我们经常可以看到各种颜色的文字，那么这些颜色的单位是什么样的大家知道吗，在这里我给大家介绍五个颜色的单位：
1:在CSS可以直接使用颜色的单词来表示不同的颜色
只适用一些简单的颜色
2:使用RGB值来表示不同的颜色
RGB ：0-255
语法：rgb(red, green, blue)
3:RGBA
语法：rgba(red, green, blue,a)
透明度：0-1之间
rgba(red, green, blue,0) 完全透明
transparent 完全透明
4:使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样
0-9,abcdf
ff 相当于255 表示最大
00 相当于0 表示最小
如果两两重复，可以截取一位，例如：#ff0000,简写#f00
5:HSL值 HSLA值
包含四个属性：亮度，色相，饱和度，透明度
对于我个人来说，在设计网页的过程中，我喜欢使用rgb来上色，因为可以直接吸取所需要的的颜色然后复制上去，非常方便。
3.字体的分类：
网页中的字体分为五大类，这个我们只需要了解一下即可，后面用到的地方并不多：
1.serif （衬线字体）
2.sans-serif （非衬线字体）
3.monospace （等宽字体）
4.cursive （草书字体）
5.fantasy （虚幻字体）
可以将字体设置为这些大的分类,当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式，一般会将字体的大分类，指定为font-family中的最后一个字体 ，用来兜底。
补充几个常用的字体样式：
font-size 设置文字大小
font-style 设置文字斜体
font-weight设置文字的加粗
font-variant设置一个小型大写字母
4.行间距：
很多人在一个块元素或者行内块元素中间写文字的时候，会经常烦恼文字上下对不齐，这时候就要用到行高设置来确保文字在上下是居中的，
1.行高（line height）文字占有的实际高度
用line-height 来设置行高，然后行内文字可上下居中，有以下几个可选值：
a：直接跟大小 例如40px 50px
b：直接跟数值，是字体大小的倍数 例如1，2，3，4，
c：可以跟百分比，是字体大小的百分比
2.单行文本在父元素中垂直居中，行高=上间距+字体大小+下间距，上间距和下间距平分空白的区域
3.font1.中也可以指定行高
5.文本样式：
1: text-transform 可以用来设置文本的大小写
可选值：
none 默认值，正常显示
capitalize 首字母大写
lowercase 设置字母小写
uppercase 设置字母大写
2: text-decoration [dɛkə'reɪʃ(ə)n] 可以用来设置文本的修饰
可选值：
none 默认值 正常显示
underline 下划线
overline 上划线
line-through 删除线
3: letter-spacing可以指定字符间距
4: word-spacing可以设置单词之间的距离
5: text-align用于设置文本的对齐方式
可选择：
left 默认值 靠左对齐
right 靠右对齐
center 居中对齐
6: text-indent 设置首行缩进，一般常用单位是em
7: white-space: ; 设置网页如何处理空白
8: text-overflow 文本溢出包含元素时发生的事情
9:vertical-align 设置元素垂直对齐的方式
10: text-shadow: h-shadow v-shadow blur color; 设置文本阴影
水平位移距离 必填 可正可负
垂直位移距离 必填 可正可负
模糊半径 可选
阴影颜色 可选 默认是字体的颜色
到这里今天的内容就介绍完毕了，比较简单，那么字体样式今天先给大家说到这里啦，有什么错误欢迎大家指出，谢谢大家观看。
扫一扫
253
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
