diff --git a/content/attachments/Pic_20250204.png b/content/attachments/Pic_20250204.png new file mode 100644 index 000000000..cc3455ebe Binary files /dev/null and b/content/attachments/Pic_20250204.png differ diff --git a/content/attachments/chinese-italic-kaiti.css b/content/attachments/chinese-italic-kaiti.css new file mode 100644 index 000000000..29c5ae6fa --- /dev/null +++ b/content/attachments/chinese-italic-kaiti.css @@ -0,0 +1,22 @@ +/* 定义中文斜体专用字体 */ +@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; /* 必须保持斜体状态 */ +} \ No newline at end of file diff --git a/content/attachments/下载 (1).png b/content/attachments/下载 (1).png new file mode 100644 index 000000000..cc3455ebe Binary files /dev/null and b/content/attachments/下载 (1).png differ diff --git a/content/blog-20250204.md b/content/blog-20250204.md new file mode 100644 index 000000000..d0749e1f8 --- /dev/null +++ b/content/blog-20250204.md @@ -0,0 +1,125 @@ +--- +title: +draft: true +tags: + - obsidian +date: 2025-02-04 +--- +# Obsidian 中文斜体楷体优化插件 + +📝 让 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/)