如何在VuePress中更换主题字体：我的轻松指南

嗨，朋友们！今天我要和大家分享一个有趣的小项目：如何在VuePress中更换主题字体。这不仅能让我们的网站看起来更个性化，还能提升阅读体验。那么，让我们开始这段轻松愉快的字体更换之旅吧！

第一步：选择你的字体

首先，我决定给我的网站换上一套新的“衣服”——LXGW Wenkai字体。这套字体优雅又现代，非常适合我的博客风格。你可以选择任何你喜欢的字体，只要确保它可以通过CDN链接引入。

第二步：在VuePress配置中引入字体

打开你的 config.ts 文件，我们要在这里添加一些代码来引入字体。这就像是在网站上放置一个指向字体库的指示牌，告诉浏览器从哪里获取这些字体。

// config.ts
import { defineUserConfig } from "vuepress";
import theme from "./theme.js";

export default defineUserConfig({
  base: "/",
  lang: "zh-CN",
  title: "KawaiiCode",
  description: "今日新博客w",

  theme,

  // 和 PWA 一起启用
  // shouldPrefetch: false,

  head: [
    // ... 其他 head 配置

    // 预连接到字体服务
    ["link", { rel: "preconnect", href: "https://cdn.jsdelivr.net/npm/@callmebill/lxgw-wenkai-web@latest", crossorigin: "anonymous" }],
    // 导入 LXGW Wenkai 字体样式表
    ["link", {
      rel: "stylesheet",
      href: "https://cdn.jsdelivr.net/npm/@callmebill/lxgw-wenkai-web@latest/style.css"
    }],
  ],

  // ... 其他配置
});

第三步：设置全局字体样式

接下来，我们要在VuePress的主题样式文件中设置全局字体。通常这个文件位于 .vuepress/styles/ 目录下的 palette.scss。这里，我们将定义一些变量，并应用到网站上的各个元素。

// palette.scss

// 设置主题颜色
$theme-color: #096dd9;

// 设置字体
$font-family: 'LXGW Wenkai', sans-serif;
$font-family-mono: 'LXGW WenKai Mono', monospace;

// 设置全局字体
body, h1, h2, h3, h4, h5, h6, p, span, div, a, ul, ol, li, table, th, td, pre, code, kbd, samp {
  font-family: $font-family;
}

// 设置标题的字体和粗细
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}

// 设置代码的字体
code, pre, kbd, samp {
  font-family: $font-family-mono;
}

第四步：重启VuePress

现在，所有准备工作都完成了，是时候重启VuePress开发服务器，看看我们的新字体效果如何了。在终端中运行以下命令：

npm run dev

或者如果你使用的是Yarn：

yarn dev

结语

就这样，我们的VuePress网站换上了一套全新的字体。这个过程是不是很简单呢？现在，你的网站看起来是不是更加吸引人了？希望这篇博文能帮助你轻松地自定义你的VuePress网站。记得享受这个过程，让你的网站成为你个性的展示窗口！