为 Fuwari 博客更换个性化字体：以 MiSans 为例

539 字

3 分钟

为 Fuwari 博客更换个性化字体：以 MiSans 为例

2026-02-03

折腾记录

Fuwari

/

美化

/

教程

/

MiSans

本文面向 Fuwari 用户，演示如何引入第三方字体 MiSans，包含 @font-face 与 Tailwind 配置。

前言#

字体修改参考了《对 Fuwari 进行一些小的改动》by 伊卡，特此致谢。

本教程选择 MiSans 作为示例字体：

MiSans 是小米主导、联合蒙纳字库与汉仪字库打造的全球语言字体家族，覆盖 20+ 书写系统、600+ 语言、10 万+ 字符，强调 简约 / 清晰 / 易读 的统一视觉体验。

官方站点：https://hyperos.mi.com/font/zh/

准备工作#

请先下载 MiSans 并准备以下两个字重（可替换为你需要的任意字重）：

MiSans-Normal.woff2（400）
MiSans-Semibold.woff2（700）

然后将字体文件放到：

1
public/fonts/

目录结构示例：

1
public/
2
  fonts/
3
    MiSans-Normal.woff2
4
    MiSans-Semibold.woff2

小提示：如果你的字体文件名不同，请记得后续同步修改路径。

步骤一：在 main.css 中注册字体#

打开 src/styles/main.css，在文件顶部添加 @font-face：

1
@font-face {
2
    font-family: 'MiSans';
3
    src: url('/fonts/MiSans-Normal.woff2') format('woff2');
4
    font-weight: 400;
5
    font-style: normal;
6
    font-display: swap;
7
}
8
@font-face {
9
    font-family: 'MiSans';
10
    src: url('/fonts/MiSans-Semibold.woff2') format('woff2');
11
    font-weight: 700;
12
    font-style: normal;
13
    font-display: swap;
14
}

font-display: swap 可以避免字体加载期间的闪烁，提高首屏体验。

步骤二：在 Tailwind 中设为默认字体#

打开 tailwind.config.cjs，将 fontFamily.sans 改为：

1
/** @type {import('tailwindcss').Config} */
2
const defaultTheme = require("tailwindcss/defaultTheme")
3
module.exports = {
4
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,mjs}"],
5
  darkMode: "class", // allows toggling dark mode manually
6
  theme: {
7
    extend: {
8
      fontFamily: {
9
        sans: ["MiSans", ...defaultTheme.fontFamily.sans],
10
      },
11
    },
12
  },
13
  plugins: [require("@tailwindcss/typography")],
14
}