Typecho Handsome 主题更换字体大全

优雅的字体能够显著提升网站的阅读体验和视觉效果。本文将详细介绍如何在 Typecho Handsome 主题中更换为各种优秀的中文字体。

---

原文请查看：https://blog.ybyq.wang/archives/984.html

🎯 基础设置方法

第一步：在自定义 head 中添加字体链接

进入 Handsome 主题后台 → 主题设置 → 自定义 head，添加对应字体的 CSS 链接。

第二步：在自定义 CSS 中应用字体

进入 Handsome 主题后台 → 主题设置 → 自定义 CSS，添加字体样式规则。

---

📝 热门字体推荐与配置（13种精选字体）

1. 霞鹜文楷（推荐✨）

特色：优雅的楷体风格，适合阅读，支持简繁中文
适用场景：博客文章、文学网站、个人日记

[secret]

屏幕阅读版（推荐）

<!-- 自定义 head -->
<link crossorigin="anonymous" integrity="sha512-uushWJqqsPYQOOyatyQoJ44WljQCC70km/MB94XcZVajojoEWQ7S4DoFMtIh4AqmS0to9mI84jxZHR2aV/OIlA==" href="https://lib.baomitu.com/lxgw-wenkai-screen-webfont/1.7.0/style.min.css" rel="stylesheet">

或者

<link crossorigin="anonymous" href="https://cdn.staticfile.net/lxgw-wenkai-screen-webfont/1.7.0/style.min.css" rel="stylesheet">

/* 自定义 CSS */
body {
   
   
    font-family: "LXGW WenKai Screen", sans-serif;
}

/* 如果想让文章内容也应用字体 */
#post-content {
   
   
    font-family: "LXGW WenKai Screen", sans-serif;
}

[/secret]

2. 思源黑体

特色：现代简洁，可读性强，适合正文显示
适用场景：企业网站、新闻博客、技术文档

[secret]

<!-- 自定义 head -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap">

/* 自定义 CSS */
body {
   
   
    font-family: "Noto Sans SC", sans-serif;
}

#post-content {
   
   
    font-family: "Noto Sans SC", sans-serif;
}

[/secret]

2. MiSans（小米无线字体）

特色：小米设计的现代无衬线字体，简洁清晰，适合各种场景
适用场景：现代网站、移动端应用、科技博客

[secret]

<!-- 自定义 head -->
<link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=MiSans:400,450:Chinese_Simplify,Latin&display=swap">

/* 自定义 CSS */
body {
   
   
    font-family: "MiSans", sans-serif;
}

#post-content {
   
   
    font-family: "MiSans", sans-serif;
}

[/secret]

3. 思源宋体

特色：经典宋体，适合长文本阅读，优雅传统
适用场景：文学作品、学术论文、传统文化网站

[secret]

<!-- 自定义 head -->
<link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=Source_Han_Serif:400,600:Chinese_Simplify,Latin&display=swap">

/* 自定义 CSS */
body {
   
   
    font-family: "Source Han Serif", serif;
}

#post-content {
   
   
    font-family: "Source Han Serif", serif;
}

[/secret]

4. 阿里巴巴普惠体

特色：温和友好，商务感强，阿里设计团队出品
适用场景：商业网站、产品介绍、企业博客

[secret]

<!-- 自定义 head -->
<link rel="stylesheet" href="https://fonts.alicdn.com/css?families=AlibabaPuHuiTi:300,400,500,700">