CSS字体样式详解：长度单位、颜色与字体属性全掌握

一、CSS长度单位CSS中有多种长度单位分为绝对单位和相对单位两大类。1.1 像素px属性说明性质绝对单位特点在任何情况下大小固定不变PC端换算1个CSS像素(px) 1个物理像素(px) 1个屏幕上发光的小元件1.2 百分比%属性说明性质相对单位特点相对于其父元素的宽高变化应用可用于流式布局1.3 em属性说明性质相对单位基准相对于当前元素的字体大小换算1个font-size 1em特殊情况如果当前元素未设置字体大小会继承祖先元素的字体大小如果所有祖先都未设置使用根标签(html)的默认字体大小16px1.4 rem属性说明性质相对单位r代表root基准相对于根标签(html)的字体大小变化1.5 vw属性说明性质相对单位基准相对于设备的视口宽度viewport width换算设备的视口宽度 100% 100vw1.6 vh属性说明性质相对单位基准相对于设备的视口高度viewport height换算设备的视口高度 100% 100vh面试重点1em 和 1rem 有什么区别1em相对于当前元素的字体大小1rem相对于根标签(html)的字体大小百分比和vw有什么区别%相对于父元素的宽高vw相对于设备视口宽度移动端开发主要使用rem和vw单位二、CSS颜色单位2.1 颜色单词直接使用颜色的英文单词表示不同颜色。color: red; color: blue; color: green;2.2 RGB值格式​rgb(red, green, blue)原理​ 使用红、绿、蓝三种颜色不同的浓度比值勾兑新颜色范围​ 浓度比值 0~255 之间工具​ 可通过截图软件获取具体颜色值color: rgb(255, 0, 0); /* 红色 */ color: rgb(0, 255, 0); /* 绿色 */ color: rgb(0, 0, 255); /* 蓝色 */2.3 RGBA值格式​rgba(red, green, blue, alpha)alpha透明度​ 0~1 之间0完全透明1完全不透明0.5半透明color: rgba(255, 0, 0, 0.5); /* 半透明红色 */2.4 十六进制RGB值格式​#红色绿色蓝色原理​ 与RGB原理相同使用16进制方式描述颜色比值字符范围​0-9,a-f简写规则​ 两两重复的值可以简写/* 简写示例 */ color: #ff0000; /* 红色 */ color: #f00; /* 简写后与上面等价 */ /* 不能简写的示例 */ color: #f1f1f1; /* 六位各不相同不能简写 */三、字体相关属性3.1 字体分类网页中将字体分为五大类字体分类英文名称特点说明衬线字体serif笔画末端有装饰性细节非衬线字体sans-serif笔画简洁无装饰细节等宽字体monospace所有字符宽度相同草书字体cursive手写风格字体虚幻字体fantasy艺术装饰性字体使用技巧​ 将字体大分类指定为font-family中的最后一个字体用于兜底保证兼容性。body { font-family: Microsoft YaHei, PingFang SC, sans-serif; }3.2 字体属性详解color功能​ 设置字体颜色color: red; color: #333; color: rgb(51, 51, 51);font-size功能​ 设置字体大小font-size: 16px; font-size: 1.5em; font-size: 100%;font-family功能​ 指定文字的字体font-family: 微软雅黑, 宋体, sans-serif;font-face自定义字体使用步骤第一步定义自定义字体font-face { font-family: font1; /* 自定义字体名字 */ src: url(./字体/字体文件.ttf); /* 自定义字体路径 */ }第二步使用自定义字体.p1 { font-family: font1; }3.3 字体样式设置font-style文字斜体可选值说明italic斜体oblique斜体normal正常显示font-style: italic; font-style: normal;font-weight文字加粗可选值说明bold/bolder加粗normal正常显示100~900数字表示粗细程度100最细900最粗400正常font-weight: bold; font-weight: 700; font-weight: normal; font-weight: 400;font简写属性功能​ 可同时设置字体大小、字体、加粗、斜体等注意事项必须设置字体大小和字体类型字体大小必须在倒数第二位字体类型必须在倒数第一位/* font: style weight size family */ font: italic bold 30px sans-serif; /* 也可以省略部分属性 */ font: 16px 微软雅黑;四、行高与文本垂直居中4.1 行高line-height构成​ 文字占有的实际高度 上间距 文字高度 下间距特点​ 上间距 下间距用途​ 设置文字行间距行高 - 文字高度可选值取值方式说明示例xxpx直接跟长度单位line-height: 24px;数值当前字体大小的倍数line-height: 1.5;百分比相对于当前字体大小line-height: 150%;line-height: 30px; /* 固定值 */ line-height: 1.5; /* 字体大小的1.5倍 */ line-height: 150%; /* 字体大小的150% */4.2 单行文本垂直居中方法​ 设置行高与父元素高度一致.box { height: 60px; line-height: 60px; /* 行高等于容器高度实现垂直居中 */ }4.3 font简写中的行高可在font属性中指定行高。格式​font: style weight size/line-height family.p2 { font: italic bold 30px/2 sans-serif; /* 30px字体2倍行高 */ }五、总结本文详细介绍了CSS字体样式的核心知识点长度单位px、%、em、rem、vw、vh的使用场景和区别颜色单位颜色单词、RGB、RGBA、十六进制RGB值字体属性字体分类、字体设置、自定义字体字体样式斜体、加粗、font简写属性行高与居中行高的构成、单行文本垂直居中技巧掌握这些知识后你将能够灵活控制网页中的文字样式实现各种排版效果。