阿里妈妈刀隶体字体使用

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

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

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

阿里妈妈刀隶体字体

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

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

2024年4月11日补充

ttf 和 otf 字体的引入方式

@font-face {
  font-family: "YouSheBiaoTiHei";
  src: url('../assets/font/YouSheBiaoTiHei.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Han Sans CN";
  src: url('../assets/font/SourceHanSansCN-Regular.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}