VuePress如何修改主题字体
大约 2 分钟
如何在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网站。记得享受这个过程,让你的网站成为你个性的展示窗口!