一、常用文本样式属性¶
| 属性 | 描述 |
|---|---|
| color 英文单词表示法 | color: red; |
| color 十六进制表示法 | color: #ff0000; |
| color rgb() 表示法 | color: rgb(255,0,0); |
| color rgba() 表示法 | color: rgba(255,0,0,.35) |
| font-size 字体大小 | font-size: 20px; |
| font-weight 字体粗细程度 | font-weight: bold; |
| font-style 字体倾斜 | font-style: italic; |
| text-decoration 文本修饰线 | text-decoration:none; |
1、color 属性¶
TIP
-
color 属性可设置文本内容的字体颜色
-
color 属性颜色值可以用 英语单词、十六进制、rgb()、rgba() 等表示法
1.1、color 属性-英文单词颜色值¶
color: red;
color: skyblue;
温馨提示
英语单词表示法，仅用于学习或测试使用，工作中基本不用这样的形式，工作实际需要按效果图来获取更精准的颜色。
1.2、color 属性 - 十六进制表示法¶
TIP
-
十六进制表示法是所有设计软件中都通用的颜色表示法
-
设计师会在设计图上标注的颜色，通常为十六进制表示
color: #cc0066;
color: #000;
- 如果颜色值是两两相同，并且能有三对，则可以简写。如 #aabbcc 的形式，可以简写为 #abc
color:#ce0666 可以简写成 color:#c06;
color:#ff43dd 不能写成 color:#f43d;
常用的十六进制表示法
| 色值 | 描述 |
|---|---|
| #000 | 黑色 |
| #fff | 白色 |
| #ccc 、#333 、#2f2f2f 、#666 、#ddd | 灰色 |
1.3、color 属性 - rgb() 表示法¶
TIP
-
rgb 是光学显示器三原色：红（red）、绿（green）、蓝（blue）三个单词的缩写
-
rgb 中三个数字的范围是 0-255 之间
-
通过不同强度的红、绿、蓝光叠加来产生各种颜色
/* rgb()三个值分别表示：红色,绿色,蓝色
最小值：0
最大值：255（红色） */
color: rgb(255, 0, 0);
/* 白色 */
color: rgb(255, 255, 255);
/* 黑色 */
color: rgb(0, 0, 0);
1.4、color 属性 - rgba() 表示法¶
TIP
-
颜色也可以用 rgba() 表示法，rgba 中前三个数字的范围是 0-255 之间，表示的是颜色
-
最后一个参数表示颜色透明度介于 0 到 1 之间
-
0 表示纯透明，1 表示纯实心（不透明），从 0-1 值越大，透明度越低
-
rgba() 表示法从 IE9 开始兼容
color: rgba(255, 0, 0, 0.35);
2、font-size 属性，字体大小¶
TIP
-
font-size 属性用来设置文字的字号大小，单位通常为 px（像素）、%百分比
-
移动端还会学习 em、rem、vw、vh 单位
2.1、px（像素）单位.¶
font-size: 20px; /* 字体大小 20px */
-
网页文字正文字号通常是 16px，网页默认字体大小通常为 16px
-
部分浏览器最小支持 12px 字号（比如旧版本的 Edge 浏览器和 Chrome 浏览器），也就是你设置的字体小于 12px，默认都会以 12px 大小显示
-
面试题：如何在页面显示小于 12px 的字体？（学到动画会讲）
2.2、%（百分比）单位¶
百分比相对于父元素的 font-size 大小而言
<style>
p {
font-size: 20px; /*字体大小*/
}
p span {
font-size: 200%; /*相当于 40px*/
}
</style>
<body>
<p><span>字体</span>大小以百分比为单位，相对的是父元素font-size大小</p>
</body>
![[Pasted image 20260222100146.png]]
2.3、em 单位¶
1em 相对于父元素的 font-size 大小
<style>
p {
font-size: 20px; /*字体大小*/
}
p span {
font-size: 2em; /* 2 * 20px =40px */
}
</style>
<body>
<p><span>字体</span>大小以百分比为单位，相对的是父元素font-size大小</p>
</body>
![[Pasted image 20260222100241.png]]
3、font-weight 属性¶
TIP
-
font-weight 属性设置字体的粗细程度
-
通常用 normal 和 bold 两个值，或 对应数字 400 与 700 来表示
| 属性 | 描述 |
|---|---|
| normal | 正常粗细，与 400 等值 |
| bold | 加粗，与 700 等值 |
| lighter | 更细，大多数中文字体不支持。 比从父元素继承来的值更细（处在字体可行的粗细值范围内） |
| bolder | 更粗，大多数中文字体不支持。 比从父元素继承来的值更粗（处在字体可行的粗细值范围内） |
相对粗细值的解析
当指定的是相对粗细值 lighter 或 bolder 时，将使用如下图表来决定元素渲染时的绝对粗细值：
| 继承值 (Inherited value) | bolder | lighter |
|---|---|---|
| 100 | 400 | 100 |
| 200 | 400 | 100 |
| 300 | 400 | 100 |
| 400 | 700 | 100 |
| 500 | 700 | 100 |
| 600 | 900 | 400 |
| 700 | 900 | 400 |
| 800 | 900 | 700 |
| 900 | 900 | 700 |
font-weight: normal; /* 正常粗细 与 font-weight:400; 效果相同*/
font-weight: bold; /* 加粗 与 font-weight:700; 效果相同*/
当我们使用 数字 来表示粗细时
-
数字大小介于 1-1000（包含）之间，更大的数字比更小的数字表示的字体要相对粗些
-
最终的粗细要在当前字体可行的精细范围之内
<style>
div {
font-weight: 400; /*正常粗细*/
}
div span {
font-weight: lighter;
}
div .bold {
font-weight: bold;
}
</style>
<body>
<div>
<span class="bold">我是加粗过的</span>
我正常粗细，
<span>我比父级字体细？</span>
</div>
</body>
渲染效果： ![[Pasted image 20260222100438.png]]
4、font-style 字体样式¶
TIP
- font-style 属性设置字体的倾斜
| 属性 | 描述 |
|---|---|
| normal | 取消倾斜，如：把天生倾斜的 i、em 等标签设置为 不倾斜 |
| italic | 设置为倾斜字体（常用） 如果当前字体没有可用的斜体版本，会选用（ oblique ）替代 |
| oblique | 设置为倾斜字体（用常规字体模拟，不常用） |
<style>
p i {
font-style: normal; /*取消倾斜*/
}
.line1 {
font-style: italic; /*倾斜字体*/
}
.line2 {
font-style: oblique; /*倾斜字体*/
}
</style>
<body>
<p><i>我是normal下修正过来的,不倾斜</i></p>
<p class="line1">倾斜?</p>
<p class="line2">倾斜?</p>
</body>
渲染效果： ![[Pasted image 20260222100559.png]]
5、font-family 字体类型¶
TIP
font-family 属性用于设置字体类型。
font-family: "微软雅黑"; /* 中文的微软雅黑 */
font-family: "Microsoft Yahei"; /*英文的微软雅黑 */
默认字体类型
当我们没有设置时，会显示浏览器的默认字体类型。不同浏览器默认字体不一样
-
旧版本的 Edge 和 Chrome 浏览器 默认字体为 "微软雅黑"
-
新版本 Edge 和 Chrome 浏览器字体为 "Noto Sans SC" （思源黑体）
添加后备字体类型
-
我们可以一次设置多个字体类型，后面的字体为前面字体的"后备"字体。
-
字体间用 ，逗号 隔开，如果第一个字体浏览器不支持，就会往后找，直到找到支持的为主，如果设置的字体都不支持，就会以浏览器默认的字体显示。
font-family: "Times New Roman", Times, serif;
注意点：
-
中文字体要用 双号号包裹 ，英文字体如果字体名称中有空格，也需要用引号包裹（不加也可以）
-
字体通常必须是用户计算机中已经安装好的字体，所以一般设置为 "微软雅黑" 和 "宋体" 较多，设置成其他的较少
-
特殊字体，一般极用图片代替，或使用自定义字体方式实现。
中文字体也可以称呼他们的英文名字
| 中文字体名 | 英文字体名 |
|---|---|
| font-family: "微软雅黑"; | font-family: "Microsoft Yahei"; |
| font-family: "宋体"; | font-family: "SimSun"; |
<style>
.title {
font-family: "Microsoft YaHei", "宋体"; /* 显示 Microsoft YaHei */
}
.desc {
font-family: "宋体", "Microsoft YaHei"; /* 显示 宋体 */
}
</style>
<div class="title">我是标题</div>
<div class="desc">我是描述文字</div>
渲染效果： ![[Pasted image 20260222100741.png]]
6、@font-face 自定义字体¶
TIP
设置用户电脑中没有的字体
@font-face 可以消除对用户电脑字体的依赖，如果用户电脑中没有我们想要的字体，那用户在浏览网页时就会下载相关字体，然后显示字体效果。
6.1、定义字体前准备工作¶
TIP
-
必须自己定义新的字体，同时需要有对应字体文件，因为用户加载网页时，会同时下载这些字体文件
-
字体文件根据操作系统和浏览器不同，有 eot 、woff2 、woff 、ttf 、svg 等文件格式。
-
浏览器对字体类型的支持性
-
目前所有浏览器都几乎都支持 woff 格式
-
目前现代浏览器都支持 woff2 格式。WOFF2 是当前最优选择，压缩率更高、加载更快。
-
目前所有浏览器都支持 ttf 格式，但 ttf 文件通常较大，影响页面加载速度，性能不如 WOFF 格式。
-
EOT：主要用于兼容旧版 IE 浏览器，现代浏览器都支持 woff 和 woff2 了。
-
SVG：虽然具有可缩放性和清晰度等优点，但在字体呈现方面不是首选格式。
-
最佳实践
-
WOFF2 覆盖约 98% 的全球浏览器（排除 IE）。
-
WOFF + WOFF2 组合覆盖近 100% 的现代浏览器。
所以，在实际开发中优先选择 woff2 格式，然后以 woff 格式作为向下兼容格式（后备方案）
6.2、如何定义字体¶
@font-face {
font-family: ; /*字体类型*/
src: url(); /*引入字体文件*/
}
@font-face {
font-family: "webfont";
src: url("webfont.eot"); /* IE9 */
src: url("webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("webfont.woff2") format("woff2"), url("webfont.woff") format("woff"), /* chrome、firefox */
url("webfont.ttf") format("truetype"),
/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url("webfont.svg#webfont") format("svg"); /* iOS 4.1- */
font-display: swap;
}
注：
-
当我们拥有字体文件后，就可以用 @font-face 定义字体
-
字体有很多是有版权的，不能随便商业使用。
-
阿里巴巴提供了一套免费商业授权的字体：https://www.iconfont.cn/fonts
-
学习时，可以采用阿里巴巴的字体。字体，可以下载，也可以在线使用，也省去了下载字体的麻烦
-
实际应用场景：指定特定文字设置样式，比如：标题 ...
6.3、使用阿里妈妈·智造字，字体步骤
第一步：进入字体网站，选择对应字体
TIP
点击网址 https://www.iconfont.cn/fonts进入，这里我们选择 阿里妈妈东方大楷，来作为教学
![[Pasted image 20260222100947.png]] 第一步：输入想要使用的该字体类型的文字内容 ![[Pasted image 20260222101015.png]] 第三步：下载字体包 TIP
一般为了使代码的体积更小，我们会选择 下载子集，而不是所有字体包 ![[Pasted image 20260222101049.png]] ![[Pasted image 20260222101120.png]] 第四步：在网页中使用该字体 TIP
在当前项目根目录下，新建 webfont 文件夹，把下载的字体文件放入文件夹中 复制代码引用，放在 CSS 文件内容的最顶部
![[Pasted image 20260222101149.png]]
- 修改引用字体文件的地址，以免免费线上字体文件加载失败或其它问题，造成字体不能用
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
font-family: "阿里妈妈东方大楷 Regular";
font-weight: 400;
src: url("./webfont/QYorMMK0ZI7T.woff2") format("woff2"), url("./webfont/QYorMMK0ZI7T.woff")
format("woff"); /* chrome、firefox、opera、Safari,*/
font-display: swap;
}
- 定义 .iconfont 样式，用来声明字体的类型
.iconfont {
font-family: "阿里妈妈东方大楷 Regular";
}
- 为文字加上对应的样式
<div class="iconfont">
艾编程- 为每个互联网人提供高质量的终身学习平台 - 这里是不支持的内容
</div>
渲染效果： ![[Pasted image 20260222101304.png]]