css基础—字体那些事

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;
  由于中文会强制换行，但是因为英文和数字不会强制换行。

  英文和数字不会自动换行

  <!--强制换行-->
     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>Title</title>
         <style>
             #box{
                  width: 300px;
                  height: 300px;
                  border: 1px solid red;
              }
             #box1{
                 width: 300px;
                 height: 300px;
                 border: 1px solid red;
                 word-break:break-all;
             }
         </style>
     </head>
     <body>
        <div id="box">
            dhfudhfuhuhjfuihbhbjfhvjfhjgjhjrhufwefeejdsdkj11111
        </div>
        <div id="box1">
            dhfudhfuhuhjfuihbhbjfhvjfhjgjhjrhufwefeejdsdkj11111
        </div>
     </body>
     <!--
     英文和数字不能强制换行
     强制换行
     word-break:break-all;
  
     -->
     </html>
  

• 强制不换行：white-space：nowrap；
  点击查看强制不换行

---

注意：词间距的使用

eg:
1.我爱学习
2.我 爱 学习

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

查看词间距使用效果

 <!--词间距-->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
           #box1, #box{
                width:800px;
                height:50px;
                border: 1px solid pink;
                color:red;
                font: 16px "宋体";
                word-spacing: 10px;
            }
        </style>
    </head>
    <body>
    <div id="box">我 爱 学习</div>
    <div id="box1">我 爱 学习</div>
    </body>
    <!--
     word-spacing: 表示词间距;
     使用词间距前：我空格-爱空格-学习
     使用词间距后：我空格-10px-爱空格-10px-学习
     -->
    </html>

---

词间距和字间距同时使用时，注意实际效果：
eg：我 爱 学 习。设置字间距为20px，词间距为50px。
实际效果为：
我-20px-空格-20px-50px-爱

词间距和字间距共同使用的效果

<!--字+词间距-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width:800px;
            height:50px;
            border: 1px solid pink;
            color:red;
            font: 16px "宋体";
            letter-spacing: 50px;
        }
        #box1{
            width:800px;
            height:50px;
            border: 1px solid pink;
            color:red;
            font: 16px "宋体";
            word-spacing: 50px;
        }
        #box2{
            width:800px;
            height:50px;
            border: 1px solid pink;
            color:red;
            font: 16px "宋体";
            word-spacing: 50px;
            letter-spacing: 20px;
        }
    </style>
</head>
<body>
<!--只使用字间距-->
<div id="box">我爱学习</div>
<!--只使用词间距-->
<div id="box1">我 爱 学 习</div>
<!--同时使用字间距和词间距-->
<div id="box2">我 爱 学 习</div>
<!--
  box2：字+词间距
  我-20px-空格-20px-50px-爱
-->
</body>
</html>