字体、图标字体、行高、文本样式（css）

字体、图标字体、行高、文本样式（css）

---

字体相关的样式

color 用来设置字体颜色

font-size (字体大小)	相关单位
em	相当于当前元素的一个font-size
rem	相当于根元素的一个font-size

font-family	字体族（字体的格式）
serif	衬线字体
sans-serif	非衬线字体
monospace	等宽字体
指字体的类别	浏览器会自动使用该类别下的字体

• font-family 可以同时指定多个字体，多个字体间使用时，隔开；字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推

        /* font-foce 可以将服务器中的字体直接提供给用户去使用 
                问题：
                    1.加载速度
                    2.版权
                    3.字体格式
        */
        @font-face {
    
    
            /* 指定字体的名字 */
            font-family: "myfont";
            /* 服务器中字体的路径   */
            src: url("");
  }

---

图标字体（iconfont）

• 使用图标时，可以将图标设置为字体，通过 font-face 的形式来使用图标，然后通过使用字体的形式来使用图标

font awesome使用步骤

1. 下载 font awesome（阿里的字体库）
2. 解压
3. 将 css 和 webfonts 移动到项目中
4. 将 all.css 引入到网页中
5. 使用图标字体
   - 直接通过类名来使用图标字体
   class= "fas fa-bell"
class ="fab fa-accessible-icon"

通过伪元素来设置图标字体

1. 找到要设置图标的元素通过 before 或 after 选中
2. 在 content 中设置字体的编码
3. 设置字体的样式
   - fab:
font-family: 'Font Awesome 5 Brands';
   - fas
font-family: 'Font Awesome 5 Free';
font-weight: 900;

通过实体来使用图标字体

• &#x图标的编码;

<span class="fas">&#xf0f3</span>

---

行高（line height）

• 行高指的是文字占有的实际高度
• 可以通过line-height 来设置
  • 行高可以指定一个大小（px em）
  • 也可以直接为行高设置一个整数（如果是整数的话，行高将会是字体的指定的倍数）
• 行高经常还用来设置文字的行间距
  • 行间距 = 行高 - 字体大小；

字体框

• 字体框就是字体存在的格子，设置font-size 实际上就是在设置字体框的高度
• 行高会在字体框的上下平均分配

字体的简写属性

• font 可以设置字体相关的所有属性；

font: bold italic 50px/2 微软雅黑, ‘Times New Roman', Times, serif;

• 语法：
  • font：字体大小/行高 字体族；
  • 行高 可以省略不写，如果不写视为使用默认值

font-weight 自重 字体的加粗

• normal 默认值 不加粗
• bold 加粗

font-style 字体的风格

• normal 正常的
• italic 斜体

---

文本的样式

text-align	文本的水平对齐
letf	左对齐
right	右对齐
center	居中对齐
justify	两端对齐

vertical-align	设置元素垂直对齐的方式
baseline	(默认值) 基线对齐
top	顶部对齐
bottom	底部对齐
middle	居中对齐

text-decoration	设置文本修饰
none	什么都没有
underline	下划线
line-through	删除线
overline	上划线

white-space	设置网页如何处理空白
normal	正常
nowrap	不换行
pre	保留空白

        /* 单行省略号 */
        .box{
    
    
            width: 200px;
            white-space: nowrap;
            overflow: hidden;
            /* 显示不换行省略号 */
            text-overflow: ellipsis;
        }