在Hugo自定义字体：MapleMono-NF-CN 字体演示
这是使用 MapleMono-NF-CN 字体的示例文章。字体已配置应用到整个博客网站，包括文章正文和代码块。
配置CSS
/* 引入 Maple Font 字体 */
/* 使用 MapleMono 作为等宽字体，用于代码显示 */
@font-face {
font-family: 'MapleMono';
src: url('https://cdn.jsdelivr.net/npm/maple-font@latest/dist/MapleMono-NF-CN.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'MapleMono';
src: url('https://cdn.jsdelivr.net/npm/maple-font@latest/dist/MapleMono-NF-CN-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'MapleMono';
src: url('https://cdn.jsdelivr.net/npm/maple-font@latest/dist/MapleMono-NF-CN-Italic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'MapleMono';
src: url('https://cdn.jsdelivr.net/npm/maple-font@latest/dist/MapleMono-NF-CN-BoldItalic.woff2') format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
}
/* 应用字体到页面 */
body {
font-family: 'MapleMono', 'Courier New', Consolas, Monaco, monospace, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
}
/* 代码块使用等宽字体 */
code,
pre,
kbd,
samp,
tt,
.hljs {
font-family: 'MapleMono', 'Courier New', Consolas, Monaco, monospace !important;
}
正文显示效果
这是一段中文文字，展示 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 博客中的应用效果：
- ✅ 自动加载: 通过 CDN 自动加载，无需手动安装
- ✅ 全局应用: 自动应用到整个网站
- ✅ 中文支持: 完美显示中文字符
- ✅ 代码高亮: 代码块使用等宽字体显示
- ✅ 响应式: 适配各种设备和屏幕尺寸
字体配置位于 assets/css/extended/maple-font.css，详细说明请查看同目录下的 README.md 文件。
谢谢关注收藏
⏰ 刚刷到的朋友注意啦！点击【关注】锁定宝藏库，从此升职加薪不迷路 ✨
我的投资理财博客：MakeMoney，https://blog-demo-559.pages.dev/
我的技术分享博客：Tesla，https://funkygod.vip/
轻量云主机限时优惠
RackNerd
☁ 主机显示特惠：只要80元（3TB流量，1vcpu，50GB硬盘） 购买地址：https://my.racknerd.com/aff.php?aff=14942
CloudCone
CloudCone 特惠轻量云主机：购买地址：https://app.cloudcone.com/?ref=12332
📢 腾讯云资源限时福利
有云服务器、CDN、对象存储、网络防护等需求的朋友，欢迎联系下方腾讯云官方销售 👇
✔️ 内部专属折扣，价格更优 ✔️ 量大可谈，支持定制方案 ✔️ 技术咨询与售后无忧
评论区