CSS字体，图标字体

àì夳堔傛蜴生んèń 2022-09-02 12:56 271阅读 0赞

# 字体相关样式 #

### **color：字体颜色** ###

**font-size：字体大小**

**font-family：字体族，基本可选值：serif，衬线字；sans-serif：非衬线字；monospace：等宽字体**

font-family可以指定多个字体，用，隔开，浏览器会优先使用第一个，如果无法使用，再使用后面的。

--------------------

# 引入服务器字体 #

@font-face \{

font-family: ;//定义字体名

src: url();//字体位置

--------------------

# **fontawesome使用方法** #

1.  下载：[https://use.fontawesome.com/releases/v5.15.3/fontawesome-free-5.15.3-web.zip][https_use.fontawesome.com_releases_v5.15.3_fontawesome-free-5.15.3-web.zip]
2.  解压
3.  将css和webfonts导入项目
4.  all.css引入html文件
5.  <span class = "fas 类名"></span>或者<span class = "fab 类名"></span>

--------------------

# 图标字三种使用方法： #

1.  伪元素（before、after）：
    
        li::before {
                    content: '\f0f3';
                    /* font-family: 'Font Awesome 5 Free'; */------fab
                    /* font-family:'Font Awesome 5 Brands'; */-----fas
                    font-weight: 900;
                }
2.  class类：

3.实体（\#；）：

--------------------

# 行高 #

*  行高是文字占有的实际高度
 *  通过line-height设置高度：100px，或者是字体的倍数（只能是整数倍，默认1.33倍）
 *  字体框就是字体存在的格子，设置font-size就是设置字体框高度
 *  行高会在字体框上下均匀分布，是字体居中
 *  行高还可以设置文字间距，文字间距=行高-字体大小

--------------------

# 其他字体属性 #

*  加粗，font-weight，可选值：normal，bold
 *  斜体，font-style，可选值：normal，italic

--------------------

# 字体简写 #

font：加粗 斜体 大小/行高 字体族

注意：加粗和斜体可以交换位置，以及行高三个可以不写，但是会有默认值，所以前面的有关样式会被覆盖。

[https_use.fontawesome.com_releases_v5.15.3_fontawesome-free-5.15.3-web.zip]: https://use.fontawesome.com/releases/v5.15.3/fontawesome-free-5.15.3-web.zip