docs(theme): correct font docs, close #4505

Author: Mister-Hope

docs/theme/src/guide/customize/font.md

@@ -19,22 +19,22 @@ For common font families, they can generally be divided into **serif**[^serif] a
 
 ## Modifying Fonts
 
-The theme provides `$font-family`, `$font-family-heading` and `$font-family-mono` three variables to control the font in `.vuepress/styles/palette.scss`.
+The theme provides `$vp-font`, `$vp-font-heading` and `$vp-font-mono` three variables to control the font in `.vuepress/styles/palette.scss`.
 
-- `$font-family`: the font used on normal text
-- `$font-family-heading:` font for heading elements
-- `$font-family-mono`: the font used in code block and inline codes
+- `$vp-font`: the font used on normal text
+- `$vp-font-heading:` font for heading elements
+- `$vp-font-mono`: the font used in code block and inline codes
 
 By default, the theme uses sans serif with normal text.
 
 ::: tip Use Serifs
 
-If you prefer serif fonts, you can modify `$font-family` to the font you want.
+If you prefer serif fonts, you can modify `$vp-font` to the font you want.
 
 The following font families are our recommended first choice for serif fonts:
 
 ```scss
-$font-family: 'Georgia, -apple-system, "Nimbus Roman No9 L", sans-serif';
+$vp-font: 'Georgia, -apple-system, "Nimbus Roman No9 L", sans-serif';
 ```
 
 :::
@@ -100,11 +100,11 @@ export default defineUserConfig({
 });
 ```
 
-Also modify the `$font-family` variable in the palette file:
+Also modify the `$vp-font` variable in the palette file:
 
 ```scss title=".vuepress/styles/palette.scss"
 // apply font
-$font-family: "Lora, serif";
+$vp-font: "Lora, serif";
 ```
 
 In this way, you can use lora font in your website.

docs/theme/src/zh/guide/customize/font.md

@@ -25,24 +25,24 @@ tag:
 
 ## 修改主题字体
 
-主题在 `.vuepress/styles/palette.scss` 中提供了 `$font-family`、`$font-family-heading` 和 `$font-family-mono` 三个变量控制字体。
+主题在 `.vuepress/styles/palette.scss` 中提供了 `$vp-font`、`$vp-font-heading` 和 `$vp-font-mono` 三个变量控制字体。
 
-- `$font-family`: 普通文本上使用的字体
-- `$font-family-heading:` 用于标题元素的字体
-- `$font-family-mono`: 代码上使用的字体
+- `$vp-font`: 普通文本上使用的字体
+- `$vp-font-heading:` 用于标题元素的字体
+- `$vp-font-mono`: 代码上使用的字体
 
 默认情况下，主题在普通文本上使用无衬线体。
 
 ::: tip 使用衬线体
 
-如果你更喜欢衬线体，你可以自行修改 `$font-family` 为你想要的字体。
+如果你更喜欢衬线体，你可以自行修改 `$vp-font` 为你想要的字体。
 
 中文博客下最常使用的字体是 Adobe 发布的思源宋体[^noto-serif-sc]，因为它具有非常宽松的协议。当然，思源宋体并不存在于大多设备上，所以你可能需要导入这个字体。你可以通过 [GitHub](https://github.com/googlefonts/noto-cjk) 下载该字体引入或直接使用 [Google Font CDN](https://fonts.google.com/noto/specimen/Noto+Serif+SC)。
 
 如下字体族是我们推荐的衬线体首选:
 
 ```scss
-$font-family: 'Georgia, -apple-system, "Nimbus Roman No9 L", "PingFang SC", "Hiragino Sans GB", "Noto Serif SC", "Microsoft Yahei", "WenQuanYi Micro Hei", "ST Heiti", sans-serif';
+$vp-font: 'Georgia, -apple-system, "Nimbus Roman No9 L", "PingFang SC", "Hiragino Sans GB", "Noto Serif SC", "Microsoft Yahei", "WenQuanYi Micro Hei", "ST Heiti", sans-serif';
 ```
 
 :::
@@ -108,11 +108,11 @@ export default defineUserConfig({
 });
 ```
 
-同时在调色板文件中修改 `$font-family` 变量:
+同时在调色板文件中修改 `$vp-font` 变量:
 
 ```scss title=".vuepress/styles/palette.scss"
 // 应用字体
-$font-family: '"Noto Serif SC", serif';
+$vp-font: '"Noto Serif SC", serif';
 ```
 
 这样你就可以在网站中使用思源宋体字体了。