MapleMono-NF-CN 字体演示

这是使用 MapleMono-NF-CN 字体的示例文章。字体已配置应用到整个博客网站，包括文章正文和代码块。

正文显示效果

这是一段中文文字，展示 MapleMono 字体在正文中的显示效果。字体具有以下特点：

  • 清晰的中文显示
  • 现代化的设计
  • 良好的可读性
  • 优秀的字距和行距

代码显示效果

以下代码块使用 MapleMono 字体显示：

package main

import (
    "fmt"
    "time"
)

func main() {
    // 使用 MapleMono 字体显示 Go 代码
    fmt.Println("Hello, MapleMono!")
    fmt.Println("当前时间:", time.Now().Format("2006-01-02 15:04:05"))
}

JavaScript 代码示例

// 使用 MapleMono 字体显示 JavaScript 代码
const mapleFont = {
  name: "MapleMono-NF-CN",
  features: ["中文支持", "Nerd Font 图标", "等宽设计", "现代化字体"],
};

function displayFeatures() {
  console.log("字体特性:");
  mapleFont.features.forEach((feature) => {
    console.log(`✅ ${feature}`);
  });
}

displayFeatures();

CSS 样式代码

/* 使用 MapleMono 字体显示 CSS 代码 */
body {
  font-family: "MapleMono", "Courier New", Consolas, Monaco, monospace !important;
  line-height: 1.6;
  color: #333;
}

code,
pre {
  font-family: "MapleMono", "Courier New", Consolas, Monaco, monospace !important;
  background-color: #f5f5f5;
  padding: 2px 4px;
  border-radius: 3px;
}

pre {
  padding: 16px;
  overflow-x: auto;
}

Python 代码示例

# 使用 MapleMono 字体显示 Python 代码
import datetime
import json

class MapleFontDemo:
    def __init__(self):
        self.font_name = "MapleMono-NF-CN"
        self.features = ["中文字符支持", "Nerd Font 图标", "等宽字体", "现代化设计"]

    def display_info(self):
        """显示字体信息"""
        info = {
            "字体名称": self.font_name,
            "特性": self.features,
            "当前时间": datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
        }

        print("MapleMono 字体信息:")
        for key, value in info.items():
            print(f"  {key}: {value}")

        return json.dumps(info, ensure_ascii=False, indent=2)

# 运行演示
if __name__ == "__main__":
    demo = MapleFontDemo()
    demo.display_info()

Shell 命令示例

# 使用 MapleMono 字体显示 Shell 命令
# 检查字体加载状态
curl -I https://cdn.jsdelivr.net/npm/maple-font@latest/dist/MapleMono-NF-CN.woff2

# 构建 Hugo 博客
hugo server --buildDrafts --disableFastRender

# 字体验证命令
fc-list | grep -i "maple"

数学公式显示

虽然 MapleMono 不是专门的数学字体，但在代码上下文中可以显示数学符号：

变量定义: let x = 42
数学运算: result = (a + b) * c / d
逻辑判断: if (x > 0 && y < 100) { ... }
集合操作: array.map(item => item * 2)
正则表达式: /^[a-zA-Z0-9]+$/

总结

MapleMono-NF-CN 字体在 Hugo 博客中的应用效果：

  1. ✅ 自动加载: 通过 CDN 自动加载，无需手动安装
  2. ✅ 全局应用: 自动应用到整个网站
  3. ✅ 中文支持: 完美显示中文字符
  4. ✅ 代码高亮: 代码块使用等宽字体显示
  5. ✅ 响应式: 适配各种设备和屏幕尺寸

字体配置位于 assets/css/extended/maple-font.css，详细说明请查看同目录下的 README.md 文件。