CSS 字体和文本详解

ゝ一世哀愁。 2024-05-06 21:23 11阅读 0赞

![steamuse.akamaihd][]

## CSS 字体和文本详解 ##

### 字体设置 ###

*  如果字体名有空格，使用引号包裹。
 *  建议使用常见字体， 否则兼容性不好。
 *  字体名称可以用英文，也可以用中文， 推荐使用英文。

**示例代码:**

![image-20240223103510233][]

**运行结果:**

![image-20240223103533115][]

### 字体大小 ###

*  不同的浏览器默认字号不一样，最好给一个明确值(chrome 默认是 16px)
 *  可以给 body 标签使用 font-size ，标题标签需要单独指定大小
 *  代码中单位 px 忘记写了或者写错了，浏览器会对其进行容错，此时会展示成默认字体大小

注意: 实际上它设置的是字体中字符框的高度，实际的字符字形可能比这些框高或矮

**示例代码:**  
![image-20240223104420325][]

**运行效果:**  
![image-20240223104534733][]

### **文本颜色** ###

color 属性值的写法:

*  预定义的颜色值(直接是单词) ，例子：`color: red;`
 *  十六进制形式(最常用) ，例子：`color: #ff00000;`
 *  RGB 方式，例子：`rgb(255, 0, 0);`

十六进制形式表示颜色， 如果两两相同，就可以用一个来表示，比如 `#ff00ff` => `#f0f`

**RGB 是什么**  
R (red: 红色), G (green: 绿色), B (blue: 蓝色) 的方式表示颜色(色光三原色)，三种颜色按照不同的比例搭配就能搭配出各种不同颜色。以`#ff00000`为例，前2位代表红色像素点，这个数字越大，红色越深，其它像素点同理，中间2位代表绿色像素点，最后2位代表蓝色像素点。

**示例代码:**

![image-20240223111234733][]

**运行效果:**

![image-20240223111340854][]

### **字体粗细** ###

font-weight 属性设置文本的粗细

<table> 
 <thead> 
  <tr> 
   <th align="center">font-weight 属性值</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">normal</td> 
   <td align="center">默认值，定义标准的字符</td> 
  </tr> 
  <tr> 
   <td align="center">bold</td> 
   <td align="center">定义粗体字符</td> 
  </tr> 
  <tr> 
   <td align="center">bolder</td> 
   <td align="center">定义更粗的字符</td> 
  </tr> 
  <tr> 
   <td align="center">lighter</td> 
   <td align="center">定义更细的字符</td> 
  </tr> 
  <tr> 
   <td align="center">100 200 300 400 500 600 700 800 900</td> 
   <td align="center">定义由粗到细的字符，400 等同于 normal，而 700 等同于 bold</td> 
  </tr> 
 </tbody> 
</table>

**示例代码:**  
![image-20240223113414628][]

**运行效果:**

![image-20240223113534721][]

### **字体风格** ###

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

<table> 
 <thead> 
  <tr> 
   <th align="center">font-style 属性值</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">normal</td> 
   <td align="center">默认值，浏览器显示一个标准的字体样式</td> 
  </tr> 
  <tr> 
   <td align="center">italic</td> 
   <td align="center">浏览器会显示一个斜体的字体样式</td> 
  </tr> 
  <tr> 
   <td align="center">oblique</td> 
   <td align="center">浏览器会显示一个倾斜的字体样式</td> 
  </tr> 
 </tbody> 
</table>

**示例代码:**

![image-20240223114142976][]

**运行效果:**  
![image-20240223114227896][]

### **文本对齐&&文本缩进** ###

**文本对齐:** 控制文字水平方向的对齐  
注：不光能控制文本对齐, 也能控制图片等元素居中或者靠右

> 语法：`text-align: [值];`

*  center: 居中对齐
 *  left: 左对齐
 *  right: 右对齐

**文本缩进:** 控制段落的首行缩进  
注：文本的其他行不影响，只有首行缩进

> 语法：`text-indent: [值];`

*  单位可以使用`px`或者`em`，推荐使用`em`作为单位，1 个 `em`就是当前元素的文字大小
 *  缩进可以是负的，表示往左缩进

**示例代码:**  
![image-20240223120831282][]

**运行效果:**  
![image-20240223120946377][]

### **文本装饰** ###

> 语法：`text-decoration: [值];`

常用取值:

*  underline 下划线(常用)
 *  none 什么都没有，不过可以给a标签/超链接标签去掉下划线
 *  overline 上划线(不常用)
 *  line-through 删除线(不常用)

**示例代码:**  
![image-20240223122108548][]

**运行结果:**

![image-20240223121821293][]

### **行高** ###

行高指的是上下文本行之间的基线距离

> 语法: `line-height: [值];`

**示例代码:**

![image-20240223122427090][]

**运行结果:**

![image-20240223122451620][]

[steamuse.akamaihd]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/f01b31354f514dccafbe5911d4cea633.jpeg
[image-20240223103510233]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/26b1e5f44f764f0aa4cdeaa2411914c7.png
[image-20240223103533115]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/717ff5bb73d74ed5b8add13f3d796a3a.png
[image-20240223104420325]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/ecc54229573c444687f45dcf9ac54107.png
[image-20240223104534733]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/82301af4487d4ef7b4407aecddbf6a3e.png
[image-20240223111234733]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/3f8eb3e648164cb481684a69fa059db1.png
[image-20240223111340854]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/5082c208a68b4a9ab4ded0b5bf5425c1.png
[image-20240223113414628]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/1fa9dac3bd5040cea3dd393f9f24b1e7.png
[image-20240223113534721]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/0371e244558d4349a9f9d6fabcc2e25c.png
[image-20240223114142976]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/ee368e6e1ef849539f4fd02afab1ccea.png
[image-20240223114227896]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/1efa7f9ffb3041fca221fba830fa4adf.png
[image-20240223120831282]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/061dca2444514d269fa3c82cfa4a8766.png
[image-20240223120946377]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/854580ac2b6b495fb2f489b30e220814.png
[image-20240223122108548]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/6e2a8195cf3349c2a3df7fe71013715a.png
[image-20240223121821293]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/ba1e0296dd2a43ad83527df56a3e723e.png
[image-20240223122427090]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/3c0b10964f1b482dae8436173144ab81.png
[image-20240223122451620]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/f2e9d84fc12e4a77ac5acbddbddf132d.png