CSS字体样式的使用，前端笔试题汇总

| 幼园 | YouYuan | \5E7C\5706 |
| 华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 细明体 | MingLiU | \7EC6\660E\4F53 |
| 新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |

二、定义字体大小

font-size 属性用于定义字体大小。

语法：

font-size``: 字号值;

字体的单位可以是绝对单位，所定义的字体大小是固定的，大小显示不会受外界因素影响。如：in(英寸),cm（厘米），mm（毫米）等单位。（不常用）

也可以使用相对单位，所定义的大小不是固定的，会根据外界环境不断变化。常用的有 px（像素），em 等单位。（常用）

三、定义字体颜色

color 属性来定义字体颜色。
语法：

color``:color值；

• 参数 color 表示颜色值；

颜色半透明 (CSS3) : 可以采取半透明的格式.

语法:

color``: rgba(r,g,b,a)  a 是alpha  透明的意思  取值范围 ``0``~``1``之间    ``color``: rgba(``0``,``0``,``0``,``0.3``)

扩展：颜色表示法：

• 使用预定义的颜色的值，如 red、green、blue 等颜色；
• 十六进制，如 #FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式；
• RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。

CSS3 在此同时还支持另外 3 种颜色表示法：

• RGBA：在原来 RGB 颜色的基础上增加了 Alpha 通道，可以定义文本的透明的颜色。如：color:rgba(255,0,0.5) ; 就可以定义半透明的红色；
• HSL：该颜色表示法是使用色相（H）、饱和度（S）和亮度（L）来表示颜色的一种方法。如：color:hsl(0,100%,100%); 就表示红色；
• HSLA：在原来 HSL 颜色的基础上增加了 Alpha 通道。如：color:hsla(0,100%,100%,.5); 就表示半透明的红色。

四、定义字体粗细

font-weight 属性定义字体粗细。

语法：

font-weight``: ``normal | ``bold | ``bolder | ``lighter | ``100 | ``200 | ``300 | ``400 | ``500 | ``600 | ``700 | ``800 | ``900

• normal  表示默认值，即正常的字体，相当于取值为 400；
• bold 表示粗体，相当于 700；
• 字体的粗细，是对字体粗细的一种量化方式，值越大就表示越粗，值越小就越细。
• 一般来说，更喜欢用数字来表示字体的粗细，取值范围（100~900）

五、定义字体风格

font-style 属性定义字体风格。

语法：

font-style``: ``normal | ``italic | ``oblique

• normal 表示默认值，即正常的字体；
• italic 表示斜体，是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观
• oblique 表示倾斜的字体，是正常竖直文本的一个倾斜版本。
  Tips：通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。

六、定义下划线

text-decoration 属性来定义字体下划线效果。

语法：
text-decoration``: ``none | ``underline | ``blink | ``overline | ``line-through

• normal 表示默认值，即无装饰字体；
• underline 表示下划线效果；
• blink 表示闪烁效果；

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

最后更多分享：前端字节跳动真题解析

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 

+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

• [外链图片转存中…(img-t7lREUuY-1710590903498)]