使用 Tailwind CSS 引入小米字体 告别原生自带丑字体

1.效果展示

整体效果更加圆润丝滑，看的也比较舒服，之前的微软雅黑啥的总感觉在看word文档，很不舒服

2.引入步骤

src的assets目录下新建fonts文件夹放入字体文件编写fonts.css

fonts.css内容：

@font-face {
  font-family: 'Miss Font';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('Miss_Font_1.woff2') format('woff2');
}

@font-face {
  font-family: 'Miss Font';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('Miss_Font_2.woff2') format('woff2');
}

@font-face {
  font-family: 'Miss Font';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('Miss_Font_3.woff2') format('woff2');
}

@font-face {
  font-family: 'Miss Font';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('Miss_Font_4.woff2') format('woff2');
}

@font-face {
  font-family: 'Miss Font';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('Miss_Font_5.woff2') format('woff2');
}

@font-face {
  font-family: 'Miss Font';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('Miss_Font_6.woff2') format('woff2');
}

@font-face {
  font-family: 'Miss Font';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('Miss_Font_7.woff2') format('woff2');
}

@font-face {
  font-family: 'Miss Font';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('Miss_Font_8.woff2') format('woff2');
}

@font-face {
  font-family: 'Miss Font';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('Miss_Font_9.woff2') format('woff2');
}

@font-face {
  font-family: 'Miss Font';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('Miss_Font_10.woff2') format('woff2');
}

字体文件放在了云盘：下载地址

在main.js中引入字体css

import './assets/fonts/fonts.css'

在tailwindcss的js文件中定义自定义字体

这个mi就是我们定义的字体名

在需要更改字体的容器上添加tailwindcss的字体的原子class

大功告成！其他字体文件的引入也是同理