最近在做的一个前端小项目，需求一种比较炫酷的字体，在网上找到了iconfont中的刀隶体，感觉还不错，本文记录了如安在前端项目中运用这种字体的过程。

1. 找到刀隶体生成的网站

拜访下面这个网站就可以了：

阿里妈妈刀隶体字体

2. 生成自己想要的字并下载到本地

找到文本输入框

阿里妈妈刀隶体运用

然后输入自己想要展示的字体：我是一只小青蛙，最爱说笑话

阿里妈妈刀隶体运用

最终点击下载子集按钮

阿里妈妈刀隶体运用

下载好的压缩包：

将压缩包中的内容复制到剪切板：

阿里妈妈刀隶体运用

3. 项目中引进

在项目中创建管理字体的目录

mkdir -p src/assets/font

然后到font目录下粘贴复制的字体文件夹

最终在项目的根款式文件中(一般来说是src/index.css)引进新字体:

@font-face {
  font-family: "DaoLiTi";
  font-weight: 400;
  src: url("./assets/font/jHsMvOZ7UDEO/XBddIp4y0BmM.woff2") format("woff2"),
       url("./assets/font/jHsMvOZ7UDEO/XBddIp4y0BmM.woff") format("woff");
  font-display: swap;
}
body {
  font-family: 'DaoLiTi', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
}

4. 新字体运用及效果

<span style={{fontFamily: 'DaoLiTi'}}>我是一只小青蛙，最爱说笑话</span>

阿里妈妈刀隶体使用

5. 留意点

DaoLiTi这个名字是可以自定义的，但是在款式文件中的无论什么地方运用的时候都不能少了引号。

此外便是除了“我是一只小青蛙，最爱说笑话”，其他字是没有刀隶体效果的！