开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第31天，点击查看活动详情

---

写在前面

本篇文章中介绍css的@font-face引入字体和filter的blur高斯模糊。

@font-face引入字体

当我们拿到一张UI设计稿，发现设计稿上用了很多很多种字体，并且项目经理要求不说百分百，百分之九十五总要有的程度还原设计稿的时候，我们就需要用到@font-face来引入字体了，使用方法很简单，只需要两步：

1、下载字体，设计稿上会有字体名称，我们需要根据字体名称去下载字体，一般都是用可以免费商用下载的字体

2、引入字体，下载好字体后需要把字体文件放到我们的项目中，同时在css代码中引入字体，比如我下了一个YouSheBiaoTiHei-2.ttf字体文件，引入代码如下：

@font-face {
  font-family: 'YouSheBiaoTiHei';
  src: url(../fonts/YouSheBiaoTiHei-2.ttf);
}

其中font-family就是使用时需要填写的font-family的名称，src就是字体文件在项目中的路径，使用方式如下：

.div {
  font-family: YouSheBiaoTiHei;
}

如此，我们的页面上就已经显示该字体了

filter滤镜

这是在一个很喜欢用阴影的UI设计师给的设计稿上看到的，效果如下：

这是我加了blur(1px)的filter的样子

这是我加了blur(2px)的filter的样子

不加的话是这样的

完整代码如下：

     .title {
        position: relative;

        &::before {
          content: '';
          position: absolute;
          top: 4px;
          left: -20px;
          width: 6px;
          height: 6px;
          filter: blur(1px);
          border-radius: 3px;
          background: #01DFE7;
        }
      }

blur表示高斯模糊，值越大越模糊，filter还有：曝光、对比度、灰度、色相旋转、反转、阴影效果、饱和度等等的属性，因为项目中只出现了blur，其他就等项目中用到的时候再详细说明

写在最后

以上就是css的@font-face引入字体和filter的blur高斯模糊的全部介绍