Typecho handsome 主题更换字体详细指南

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

![handesome.webp][1]

**🎯 基础设置方法**

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

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

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

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

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

**1. 霞鹜文楷（推荐✨）**
**特色：**优雅的楷体风格，适合阅读，支持简繁中文
**适用场景：**博客文章、文学网站、个人日记

屏幕阅读版（推荐）

<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. 思源黑体**
**特色：**现代简洁，可读性强，适合正文显示
**适用场景：**企业网站、新闻博客、技术文档
屏幕阅读版（推荐）

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

自定义CSS：

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

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

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

自定义CSS：

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

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

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

自定义CSS：

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

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

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

自定义CSS：

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

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

<link rel="stylesheet" href="https://chinese-font.netlify.app/font/youshebiaotihei/youshebiaotihei.css">

自定义CSS：

/* 自定义 CSS */
    h1, h2, h3, h4, h5, h6 {
        font-family: "YouSheBiaoTiHei", sans-serif;
    }
    
    /* 如果想要全站应用 */
    body {
        font-family: "YouSheBiaoTiHei", sans-serif;
    }

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

<link rel="stylesheet" href="https://lib.baomitu.com/fonts/zcool-kuaile/zcool-kuaile.css">
自定义CSS：
    /* 自定义 CSS */
    body {
        font-family: "ZCOOL KuaiLe", cursive;
    }
    
    #post-content {
        font-family: "ZCOOL KuaiLe", cursive;
    }

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

<link rel="stylesheet" href="https://chinese-font.netlify.app/font/smiley-sans/smiley-sans.css">
自定义CSS：
    /* 自定义 CSS */
    body {
        font-family: "SmileySans", sans-serif;
    }
    
    #post-content {
        font-family: "SmileySans", sans-serif;
    }

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

<link rel="stylesheet" href="https://chinese-font.netlify.app/font/yozai/yozai.css">

自定义CSS：

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

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

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

自定义CSS：

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

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

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

自定义CSS：

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

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ayahub/webfont-harmony-sans-sc@1.0.0/index.css">
自定义CSS：
    /* 自定义 CSS */
    body {
        font-family: "HarmonyOS Sans SC", sans-serif;
    }
    
    #post-content {
        font-family: "HarmonyOS Sans SC", sans-serif;
    }

备用CDN（推荐）

<link rel="stylesheet" href="https://chinese-font.netlify.app/font/harmony-os-sans-sc/harmony-os-sans-sc.css">

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

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

自定义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官方设计字体，现代简洁，几何感强，科技感十足
**适用场景：**科技网站、数码产品展示、现代企业站、移动应用界面

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

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

🚀 **CDN 服务商推荐（中国境内可用）**
**国内优质 CDN**
小米字体服务：https://font.sec.miui.com/ （稳定快速，支持多种字体）
奇虎360 CDN：https://lib.baomitu.com/ （免费稳定，字体资源丰富）
阿里字体服务：https://fonts.alicdn.com/ （阿里官方，加载速度快）
七牛云 CDN：https://cdn.staticfile.org/ （企业级服务，可靠性高）
字节跳动 CDN：https://lf-cdn-tos.bytecdntp.com/ （新兴服务，速度优秀）

**专业字体平台**

中文网字计划：https://chinese-font.netlify.app/ （开源免费，字体种类丰富）
文风字体：https://windfonts.com/ （专为中文设计，免费可商用）
jsDelivr：https://cdn.jsdelivr.net/ （全球CDN，国内可用）

**⚡ 性能优化建议**

**1. 字体预加载**

<link rel="preload" href="https://font.sec.miui.com/font/css?family=MiSans:400,450:Chinese_Simplify,Latin&display=swap" as="style">
    <link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=MiSans:400,450:Chinese_Simplify,Latin&display=swap">

**2. font-display 优化**

@font-face {
        font-family: 'CustomFont';
        src: url('font.woff2') format('woff2');
        font-display: swap; /* 确保文字快速显示，避免闪烁 */
    }

**3. 字体回退策略**

/* 推荐的字体栈配置 */
    body {
        font-family: "MiSans", "Noto Sans SC", "PingFang SC", 
                    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    }
    
    /* 宋体类字体栈 */
    .serif-font {
        font-family: "Source Han Serif", "Noto Serif SC", "SimSun", serif;
    }

**⚠️ 重要注意事项**

**1. 兼容性测试**

浏览器兼容：在Chrome、Firefox、Safari、Edge等主流浏览器测试
设备适配：确保在PC、平板、手机等设备正常显示
系统差异：Windows、macOS、Android、iOS等系统字体显示可能略有差异

**2. 加载性能**

字体大小：中文字体文件通常较大（2-10MB），选择压缩版本
加载策略：使用 font-display: swap 避免文字闪烁
CDN选择：选择国内CDN确保加载速度

**3. 版权合规**

开源字体：优先选择开源免费字体，如霞鹜文楷、思源系列
商用授权：商业网站使用前确认字体授权范围
版权标识：部分字体需要保留版权信息

**4. 用户体验**

可读性：确保字体在不同尺寸下都清晰可读
一致性：保持网站整体字体风格统一
无障碍：考虑视障用户需求，避免过于花哨的字体

**🎨 字体搭配建议**

**经典搭配方案**

**方案一：现代简约**

/* 标题使用 MiSans */
    h1, h2, h3, h4, h5, h6 {
        font-family: "MiSans", sans-serif;
        font-weight: 500;
    }
    
    /* 正文使用思源黑体 */
    body, p {
        font-family: "Noto Sans SC", sans-serif;
        font-weight: 400;
    }

**方案二：文艺典雅**

/* 标题使用霞鹜文楷 */
    h1, h2, h3, h4, h5, h6 {
        font-family: "LXGW WenKai Screen", serif;
        font-weight: 500;
    }
    
    /* 正文使用思源宋体 */
    body, p {
        font-family: "Source Han Serif", serif;
        font-weight: 400;
    }

**方案三：年轻活泼**

/* 标题使用得意黑 */
    h1, h2, h3, h4, h5, h6 {
        font-family: "SmileySans", sans-serif;
        font-weight: 600;
    }
    
    /* 正文使用悠哉字体 */
    body, p {
        font-family: "Yozai", sans-serif;
        font-weight: 400;
    }

**细节优化**

/* 代码块保持等宽字体 */
    code, pre {
        font-family: "Monaco", "Menlo", "Consolas", "JetBrains Mono", monospace;
    }
    
    /* 引用块使用斜体 */
    blockquote {
        font-style: italic;
        font-weight: 300;
    }
    
    /* 响应式字体大小 */
    @media (max-width: 768px) {
        body { font-size: 14px; }
    }
    
    @media (min-width: 1200px) {
        body { font-size: 18px; }
    }

通过合理选择和配置字体，您的 Typecho 博客将呈现更加专业和美观的视觉效果！记住要根据网站主题和目标用户选择最合适的字体组合。

[1]: https://mqfs.com/usr/uploads/2025/09/3317103221.webp

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

🎯 基础设置方法

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

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

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

进入 Handsome 主题后台 → 主题设置 → 自定义 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">

或者

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

自定义CSS：

/* 自定义 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：

/* 自定义 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：

   /* 自定义 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：

/* 自定义 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：

    /* 自定义 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：

/* 自定义 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：

/* 自定义 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：

/* 自定义 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：

/* 自定义 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：

/* 自定义 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：

> /* 自定义 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：

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

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

备用CDN（推荐）

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

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

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

自定义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：

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

🚀 CDN 服务商推荐（中国境内可用）
国内优质 CDN
小米字体服务：https://font.sec.miui.com/ （稳定快速，支持多种字体）
奇虎360 CDN：https://lib.baomitu.com/ （免费稳定，字体资源丰富）
阿里字体服务：https://fonts.alicdn.com/ （阿里官方，加载速度快）
七牛云 CDN：https://cdn.staticfile.org/ （企业级服务，可靠性高）
字节跳动 CDN：https://lf-cdn-tos.bytecdntp.com/ （新兴服务，速度优秀）

专业字体平台

⚡ 性能优化建议

1. 字体预加载

<!-- 在 head 中添加预加载，提升首屏加载速度 -->
<link rel="preload" href="https://font.sec.miui.com/font/css?family=MiSans:400,450:Chinese_Simplify,Latin&display=swap" as="style">
<link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=MiSans:400,450:Chinese_Simplify,Latin&display=swap">

2. font-display 优化

@font-face {
    font-family: 'CustomFont';
    src: url('font.woff2') format('woff2');
    font-display: swap; /* 确保文字快速显示，避免闪烁 */
}

3. 字体回退策略

/* 推荐的字体栈配置 */
body {
    font-family: "MiSans", "Noto Sans SC", "PingFang SC", 
                "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* 宋体类字体栈 */
.serif-font {
    font-family: "Source Han Serif", "Noto Serif SC", "SimSun", serif;
}

⚠️ 重要注意事项

1. 兼容性测试

2. 加载性能

字体大小：中文字体文件通常较大（2-10MB），选择压缩版本
加载策略：使用 font-display: swap 避免文字闪烁
CDN选择：选择国内CDN确保加载速度

3. 版权合规

开源字体：优先选择开源免费字体，如霞鹜文楷、思源系列
商用授权：商业网站使用前确认字体授权范围
版权标识：部分字体需要保留版权信息

4. 用户体验

可读性：确保字体在不同尺寸下都清晰可读
一致性：保持网站整体字体风格统一
无障碍：考虑视障用户需求，避免过于花哨的字体

🎨 字体搭配建议

经典搭配方案

方案一：现代简约

/* 标题使用 MiSans */
h1, h2, h3, h4, h5, h6 {
    font-family: "MiSans", sans-serif;
    font-weight: 500;
}

/* 正文使用思源黑体 */
body, p {
    font-family: "Noto Sans SC", sans-serif;
    font-weight: 400;
}

方案二：文艺典雅

/* 标题使用霞鹜文楷 */
h1, h2, h3, h4, h5, h6 {
    font-family: "LXGW WenKai Screen", serif;
    font-weight: 500;
}

/* 正文使用思源宋体 */
body, p {
    font-family: "Source Han Serif", serif;
    font-weight: 400;
}

方案三：年轻活泼

/* 标题使用得意黑 */
h1, h2, h3, h4, h5, h6 {
    font-family: "SmileySans", sans-serif;
    font-weight: 600;
}

/* 正文使用悠哉字体 */
body, p {
    font-family: "Yozai", sans-serif;
    font-weight: 400;
}

细节优化

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

/* 引用块使用斜体 */
blockquote {
    font-style: italic;
    font-weight: 300;
}

/* 响应式字体大小 */
@media (max-width: 768px) {
    body { font-size: 14px; }
}

@media (min-width: 1200px) {
    body { font-size: 18px; }
}

通过合理选择和配置字体，您的 Typecho 博客将呈现更加专业和美观的视觉效果！记住要根据网站主题和目标用户选择最合适的字体组合。

最后修改：2025 年 09 月 16 日

如果觉得这篇文章对你有用，请随意赞赏。

2 条评论

Huo
September 17th, 2025 at 07:38 pm

大佬这博客是我第一次见用这个主题设置单栏的，好看，这样看起来更简洁，干净！
现在我用 Mac Safari 浏览器稍微有点bug，具体看图：
![image](https://i.111666.best/image/P2KcfQqaT7kDq94kPAhkEj.png)

回复
1. Gai.Ceo
  September 18th, 2025 at 10:48 am
  
  @Huo
  
  前几天我也发现了在iMac上确实会有一些错位情况，当时没在意，我现在反馈给主题作者，看看如何优化一下，感谢哈。
  
  回复

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

2 条评论

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Typecho handsome 主题更换字体详细指南

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款