--- title: Obsidian 中文斜体楷体优化插件 draft: false tags: - obsidian date: 2025-02-04 comments: true --- 📝 让 Obsidian 的中文斜体优雅显示为楷体,同时保持英文原生斜体效果 --- ## 🎯 需求对比:为什么你需要这个 CSS? | 场景 | 原生 Obsidian / 普通方案 | 本 CSS 方案 | 解决的问题 | | --------------- | ------------------ | ----------------------- | --------------------- | | **中文斜体显示** | 伪斜体(字体拉伸变形) | 真实楷体字形 | 避免中文字符强制拉伸导致的模糊 | | **中英文混排** | 英文被中文字体覆盖 | 英文保持系统原生斜体 | 提升西文可读性,符合排版规范 | | **多平台兼容** | 依赖系统特定字体名称 | 自动检测 Win/macOS/Linux 楷体 | 跨平台开箱即用 | | **代码块保护** | 可能影响代码区字体 | 通过 `unicode-range` 精准控制 | 编程代码不受任何影响 | | **主题兼容性** | 与某些主题冲突 | 独立字体族 + CSS 变量支持 | 适配 90% 以上 Obsidian 主题 | --- ## ✨ 核心特性 - **智能字体切换** 仅对 `U+4E00-9FFF` 范围的中文字符应用楷体,数字、英文、符号保持原字体 - **双模式支持** 同时在 **编辑模式** 和 **阅读模式** 生效 - **嵌套样式兼容** 完美处理 `**粗体 _嵌套斜体_**` 等复杂场景 - **性能优化** 仅 0.5KB 的超轻量级 CSS,无外部资源依赖 --- ## 🛠️ 安装指南 ### 方法一:快速安装(推荐) 1. 下载 chinese-italic-kaiti.css 2. 放入 Obsidian 库的 `.obsidian/snippets/` 目录 3. 启用:设置 → 外观 → CSS 代码片段 → 开启 ### 方法二:手动创建 ```bash # 在 Obsidian 库中执行 mkdir -p .obsidian/snippets cat > .obsidian/snippets/chinese-italic-kaiti.css << 'EOF' /* 定义中文斜体专用字体 */ @font-face { font-family: 'ChineseItalic'; font-style: italic; src: local('楷体'), local('Kaiti SC'), local('STKaiti'); unicode-range: U+4E00-9FFF; /* 中文字符范围 */ } /* 智能应用规则 */ em, .cm-em, i { font-family: -apple-system, /* 西文字体栈 */ BlinkMacSystemFont, 'Segoe UI', Roboto, 'ChineseItalic', /* 中文斜体触发 */ sans-serif; font-style: italic; /* 必须保持斜体状态 */ } EOF ``` --- ## 🌈 效果预览 ![[Pic_20250204.png]] --- ## ⚙️ 高级配置 ### 自定义字体 ```css /* 修改 @font-face 中的 src 项 */ src: local('您的自定义楷体名称'), url('自定义字体.woff2'); ``` ### 调整字符范围 ```css /* 增加注音符号支持 */ unicode-range: U+4E00-9FFF, U+3000-303F, U+31C0-31EF; ``` ### 禁用阅读模式 ```css .markdown-preview-view em { font-family: inherit !important; } ``` --- ## ❓ 常见问题 **Q:为什么某些字符不生效?** A:请检查系统是否安装楷体,或扩展 `unicode-range` 范围 **Q:会拖慢 Obsidian 速度吗?** A:纯 CSS 实现,零性能影响 **Q:支持移动端吗?** A:完全兼容 iOS/Android 版 Obsidian --- ## 📜 协议许可 [![CC BY-NC-SA 4.0](https://licensebuttons.net/l/by/4.0/80x15.png)](https://creativecommons.org/licenses/by/4.0/)