css基础—字体那些事

1. 首先讲字的大小样式等

• 字体大小 font-size: 40px;
• 文字字体 font-family: "宋体",Arial;

• 文字样式 font-style:normal;

  -normal:正常字体    -italic，oblique:斜体

• 字体加粗 font-weight: bold;
• 每行所占高度（行高） line-height: 50px;

---

疑问一: 文字字体怎么会同时写两个值？

解答: 是首选和备选的关系，不只可以写两个，还可以写多个。放在第一个位置的是首选，后面的是备选。因为网页中可能存在中英文，中英文的字体样式不同。 font-family：首选，备选1，备选2.....

注意：当网页上存在中文和英文的时候。要首先写英文字体，在写中文字体。因为中文字体库包含英文，英文字体库不包含中文。

疑问二：行高是什么？用来干什么的？

解答：转和line-height用来控制文字垂直方向上的位置。

---

2. 字体相关属性

• 字体颜色 color:red;
• 首行缩进 text-indent: 2em;或者 text-indent: 32px;

• 文本水平方向对齐 text-align:文本对齐

  - 属性值有3个：left，center，right。- 只能靠左，居中，靠右。- 上下移动目前可以使用line-height.

• text-decoration:文本修饰

  • underline 下划线
  • line-through 删除线
  • overline 上划线
  • none 无
• 字间距:letter-spacing:10px;
• 词间距:word-spacing:10px;
• 字间距+词间距:
  letter-spacing:10px;和word-spacing:10px;共同使用

• 强制换行：word-break:break-all;

  由于中文会强制换行，但是因为英文和数字不会强制换行。

                        
                                  
        
                   dhfudhfuhuhjfuihbhbjfhvjfhjgjhjrhufwefeejdsdkj11111      
        
        
        
                   dhfudhfuhuhjfuihbhbjfhvjfhjgjhjrhufwefeejdsdkj11111      
        
        
           

• 强制不换行：white-space：nowrap；

---

注意：词间距的使用

eg:

1.我爱学习 2.我 爱 学习

对这两个写样式词间距的样式。只有2起作用。因为浏览器无法自动识别那些是词，给了空格才知道。

                        
                                
    
     我 爱 学习
    
    
    
     我 爱 学习
    
        
        

---

词间距和字间距同时使用时，注意实际效果：

eg：我 爱 学 习。设置字间距为20px，词间距为50px。实际效果为：我-20px-空格-20px-50px-爱

        
            
    
    
     我爱学习
    
    
    
     我 爱 学 习
    
    
    
     我 爱 学 习