阿里妈妈刀隶体使用

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

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

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

阿里妈妈刀隶体字体

http://www.iconfont.cn/fonts/detai…

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这个名字是可以自定义的，但是在样式文件中的无论什么地方使用的时候都不能少了引号。

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