头像 One
头像 One

更多功能请点顶栏「快捷菜单」

teek teek 635 字 3 分钟 -- 次

配置好看的中文字体

最后更新于:

给自己博客配置一个好看的中文字体吧……

配置好看的中文字体

image-20250329210013613

目录

[[toc]]

[toc]

前言

给自己博客配置一个好看的中文字体吧……

版权

自己gpt。

环境

2025年3月29日解决。

配置环境：

《Youbg Kbt》大佬开源的《vitepress-theme-teek》一个博客项目（知识库+博客 二合一），它是一个轻量、简易的VitePress主题框架，非常简约唯美，且也在持续迭代更新，感谢大佬开源的这款优秀产品，大佬威武。💖💖💖

效果

image-20250329205522189

image-20250329205542299

配置

（1）下载字体

从平台（如阿里巴巴普惠体）下载

或者

从我的链接下载：《阿里普惠体和霞鹜文楷字体》

创建demo\docs-base\public\fonts目录

然后将下载好的字体放到fonts目录

image-20250329205005924

（2）引入css文件

创建demo\docs-base\.vitepress\theme\styles\font.scss文件，填入如下内容：

 1/* 定义自定义中文字体 */
 2@font-face {
 3  font-family: "Ali_PuHuiTi";
 4  src: url("/fonts/阿里普惠体/Alibaba_PuHuiTi_2.0_55_Regular_55_Regular.ttf") format("truetype");
 5  font-weight: 300;
 6  font-style: normal;
 7  font-display: swap;
 8}
 9
10@font-face {
11  font-family: "霞鹜文楷";
12  src: url("/fonts/霞鹜文楷/霞鹜文楷.ttf") format("truetype");
13  font-weight: 300;
14  font-style: normal;
15  font-display: swap;
16}
17
18
19/* 应用字体 */
20:root {
21  --vp-font-family-base: "Ali_PuHuiTi", "霞鹜文楷", "PingFang SC", sans-serif; //base：影响正文、标题等文本。 
22  --vp-font-family-mono: "JetBrains Mono", "Cascadia Mono", "Not Sans SC", monospace; //mono：影响代码块的等宽字体。  
23}

image-20250329205242634

在demo\docs-base\.vitepress\theme\styles\index.scss文件添加一行代码：

1@use "./font.scss" as *; // 好看的中文字体

image-20250329205232840

（3）运行，验证效果

更新

自己最后选择了筑紫A丸作为自己网站字体。（这个字体的确很好看哦，强烈推荐）。配置内容和上文一样。

image-20250402221300367

docs\.vitepress\theme\styles\font.scss

1@font-face {
2  font-family: "筑紫A丸";
3  src: url("/fonts/筑紫A丸/TsukuARdGothicStd-Regular.ttf") format("truetype");
4  font-weight: 300;
5  font-style: normal;
6  font-display: swap;
7}

image-20250402221411790

扩展

优化字体加载方式

image-20250330221324910

image-20250330221343403

🍊 加载方式

image-20250330220929369

image-20250330220938763

📡
👤 作者: One
🔗 链接: https://onedayxyy.cn/topics/sizwp
🌐 版权: 本站文章除特别声明外，均采用 CC BY-NC-SA 4.0 协议，转载请注明来自 One Blog！
最新文章

文档导航