Typecho 如何变更网站字体详细指南

基础设置方法

第一步：在自定义 head 中添加字体链接 进入 主题后台 → 主题设置 → 自定义 head，添加对应字体的 CSS 链接。

第二步：在自定义 CSS 中应用字体 进入 主题后台 → 主题设置 → 自定义 CSS，添加字体样式规则。

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

1，霞鹜文楷（推荐）

特色：优雅的楷体风格，适合阅读，支持简繁中文

适用场景：博客文章、文学网站、个人日记 屏幕阅读版（推荐）

<!-- 自定义 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">

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

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

2. 思源黑体

特色：现代简洁，可读性强，适合正文显示

适用场景：企业网站、新闻博客、技术文档

<!-- 自定义 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;
}

3. MiSans（小米无线字体）

特色：小米设计的现代无衬线字体，简洁清晰，适合各种场景

适用场景：现代网站、移动端应用、科技博客

<!-- 自定义 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;
}

4. 思源宋体

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

<!-- 自定义 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;
}

5. 阿里巴巴普惠体

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

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

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

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

6.优设标题黑

特色：醒目有力，适合标题使用，设计感强
适用场景：设计网站、创意博客、标题重点突出

<!-- 自定义 head -->
<link rel="stylesheet" href="https://chinese-font.netlify.app/font/youshebiaotihei/youshebiaotihei.css">

/* 自定义 CSS */
h1, h2, h3, h4, h5, h6 {
    font-family: "YouSheBiaoTiHei", sans-serif;
}

/* 如果想要全站应用 */
body {
    font-family: "YouSheBiaoTiHei", sans-serif;
}

7.站酷快乐体

特色：轻松活泼，充满趣味性，适合轻松主题
适用场景：个人博客、娱乐网站、儿童相关内容

<!-- 自定义 head -->
<link rel="stylesheet" href="https://lib.baomitu.com/fonts/zcool-kuaile/zcool-kuaile.css">

/* 自定义 CSS */
body {
    font-family: "ZCOOL KuaiLe", cursive;
}

#post-content {
    font-family: "ZCOOL KuaiLe", cursive;
}

8.得意黑

特色：轻松活泼，带有亲和力，B站官方开源字体
适用场景：生活博客、创意网站、年轻群体

<!-- 自定义 head -->
<link rel="stylesheet" href="https://chinese-font.netlify.app/font/smiley-sans/smiley-sans.css">

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

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

9.悠哉字体

特色：圆润可爱，休闲风格，适合长时间阅读
适用场景：个人博客、生活分享、轻松主题

<!-- 自定义 head -->
<link rel="stylesheet" href="https://chinese-font.netlify.app/font/yozai/yozai.css">

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

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

10.抖音美好体

特色：时尚现代，富有活力，字节跳动设计
适用场景：时尚博客、创意展示、年轻化网站

<!-- 自定义 head -->
<link rel="stylesheet" href="https://chinese-font.netlify.app/font/douyin-sans/douyin-sans.css">

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

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

11.仓耳今楷01

特色：现代楷体，典雅清秀，笔画流畅
适用场景：文化类网站、诗词博客、传统艺术展示

<!-- 自定义 head -->
<link rel="stylesheet" href="https://lib.baomitu.com/fonts/tsangertype-jinkai01/tsangertype-jinkai01.css">

/* 自定义 CSS */
body {
    font-family: "TsangerType JinKai01", "KaiTi", serif;
}

#post-content {
    font-family: "TsangerType JinKai01", "KaiTi", serif;
}

12.鸿蒙字体（HarmonyOS Sans）

特色：华为官方字体，现代简洁，多语言支持，易读性强
适用场景：科技网站、现代企业站、移动端友好的博客

<!-- 自定义 head -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ayahub/webfont-harmony-sans-sc@1.0.0/index.css">

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

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

13.焦糖玛奇朵体

特色：温暖可爱，如焦糖般的甜美感，适合轻松愉快的内容
适用场景：美食博客、生活分享、甜品店网站、温馨主题

<!-- 自定义 head -->
<link rel="stylesheet" href="https://chinese-font.netlify.app/font/caramel-macchiato/caramel-macchiato.css">

/* 自定义 CSS */
body {
    font-family: "Caramel Macchiato", cursive;
}

#post-content {
    font-family: "Caramel Macchiato", cursive;
}

/* 建议搭配暖色调 */
h1, h2, h3 {
    font-family: "Caramel Macchiato", cursive;
    color: #8B4513; /* 焦糖色 */
}

14.OPPO Sans

特色：OPPO官方设计字体，现代简洁，几何感强，科技感十足
适用场景：科技网站、数码产品展示、现代企业站、移动应用界面

<!-- 自定义 head -->
<link rel="stylesheet" href="https://chinese-font.netlify.app/font/oppo-sans/oppo-sans.css">

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

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

/* 标题使用较粗字重突出科技感 */
h1, h2, h3, h4, h5, h6 {
    font-family: "OPPO Sans", sans-serif;
    font-weight: 600;
}

高级配置

字体粗细控制

/* 标题使用较粗字重 */
h1, h2, h3, h4, h5, h6 {
    font-family: "LXGW WenKai Screen", sans-serif;
    font-weight: 700;
}

/* 正文使用常规字重 */
body, p {
    font-family: "LXGW WenKai Screen", sans-serif;
    font-weight: 400;
}

/* 代码块保持等宽字体 */
code, pre {
    font-family: "Monaco", "Menlo", "Consolas", monospace;
}

响应式字体大小

/* 基础字体设置 */
body {
    font-family: "LXGW WenKai Screen", sans-serif;
    font-size: 16px;
    line-height: 1.7;
}

/* 移动端优化 */
@media (max-width: 768px) {
    body {
        font-size: 14px;
        line-height: 1.6;
    }
}

/* 大屏幕优化 */
@media (min-width: 1200px) {
    body {
        font-size: 18px;
        line-height: 1.8;
    }
}