CSS——字体样式和图标字体

前言

在前端开发中，字体无疑是很基础的一个设置，本篇文章将对CSS中对字体的设置以及如何使用字体样式来表达一些矢量图标进行讲解，希望对大家有所帮助。

一、字体样式

字体相关的样式主要有以下三个属性：color、font-size和font-family，分别表示字体颜色、字体大小和字体样式。
前两者没太多好说的，这里主要来讲一下font-family字体族

可选值	类别
serif	衬线字体
sans-serif	非衬线字体
monospace	等宽字体

    
    
    


    
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, unde!
    
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, unde!
    
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, unde!

字体样式实例一

font-family可以同时指定多个字体，多个字体间使用字体生效时优先使用第一个，第一个无法使用则使用第二个，如果第二个用户电脑还不支持，则依次类推。 上面介绍的`serif``等字体指的并不是某一个具体的字体，而是指的某个类别的字体。在实际应用中，我们一般会把上面的参数作为用户不支持我们指定的多种字体后，作为最后保底的字体选择。

二、服务端提供自定义字体

实际上，我们使用font-family进行字体指定时，需要用户的电脑上刚好有安装我们指定的字体，否则我们对于字体的设置就会失效。所以一般来说，为了兼容性更好，我们比较少会去使用一些少见的字体。但如果说在某些特殊的场景中，我们确实需要去使用一些特殊的字体，那么我们可以通过由服务端提供字体给用户使用这种方式来解决兼容性的问题。

步骤一：使用@font-face在页面中引入自定义的字体

font-family参数表示我们给引入字体的自定义命名
src表示字体文件的位置，后面的format表示字体文件的格式，主要用于给浏览器识别，也可以不加。
一般来说，truetype表示的是ttf格式的字体文件。

步骤二：使用自定义的样式

        #root{
            font-family: myfont;
        }

自定义字体结果演示

需要注意的是，在使用自定义字体的过程中要留意以下两点：

（1）使用的自定义字体没有版权隐患

（2）自定义字体的体积最好不要过大，否则会影响用户体验

三、图标字体（iconFont）

在网页中经常需要使用一些图标，可以通过图片来引入。但是图片大小本身比较大，并且非常的不灵活（比如想要调整颜色就很不方便），所以在使用图标时，我们还可以将图标直接设置为字体格式来进行引入，然后通过font-face的形式来对字体进行引入，这样我们就可以通过使用字体的形式来使用图标。
这里的话，我们先介绍国外一个部分免费的图标字体网站fontawesome，看一下如何对其进行使用。

步骤一：去官网上下载图标资源：https://fontawesome.com/

下载图标

步骤二：解压后，将css和webfonts目录复制到我们的项目中

image.png

步骤三：将all.css引入到我们的网页里

步骤四：使用我们想要的图标

图标的详细信息可以在官方上进行查看

引入完成后，我们有三种方式来使用我们的图标字体：

方式一：通过直接使用

方式二：通过实体的方式使用：

使用时，需要注意在图标的unicode外面使用&#x ;进行包裹

    
    

方式三：通过伪类选择器的方式使用：

需要注意的是，对于fab和fas类别来说，二者的使用方式略有不同：

fab:
        font-family: 'Font Awesome 5 Brands';
fas:
        font-family: 'Font Awesome 5 Free';
        font-weight: 900; 

    
...
    

        
飞流直下三千尺
        
疑是银河落九天
    

图标演示结果

四、使用阿里的图标字体库iconfont

在国内来说，可能上面的iconawesome使用的相对较少，更多时候使用的是阿里的iconfont，因为后者支持的图标库更多且更丰富。（但需要注意的是，如果用于商业项目，还是需要注意版权问题）
使用阿里的图标字体库方式也十分简单：

步骤一：下载指定的图标到本地

前往官网：https://www.iconfont.cn/ 将自己想要获取的图标放入购物车后，选择下载到项目，然后在下载至本地。

使用阿里的iconfont

步骤二：把下载的文件引入到项目中

点击下载按钮，下载至本地后自行解压，然后将除了demo_index.html和demo.css之外的文件，都引入到我们的项目中。

image.png

步骤三：在项目中使用引入的图标字体（使用方式和iconawesome差不多）

    
    
    
    


    
    
    

        
飞流直下三千尺
        
疑是银河落九天
    

iconfont使用演示用例