mirror of
https://github.com/jackyzha0/quartz.git
synced 2025-12-27 14:54:05 -06:00
127 lines
3.6 KiB
Markdown
127 lines
3.6 KiB
Markdown
---
|
||
title: Obsidian 中文斜体楷体优化插件
|
||
publish: true
|
||
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. 下载 <a href="/attachments/chinese-italic-kaiti.css" class="internal" data-slug="attachments/chinese-italic-kaiti.css" download="chinese-italic-kaiti.css">chinese-italic-kaiti.css</a>
|
||
2. 放入 Obsidian 库的 `.obsidian/snippets/` 目录
|
||
3. 启用：设置 → 外观 → CSS 代码片段 → 开启
|
||
|
||
### 方法二：手动创建
|
||
```bash
|
||
# 在 Obsidian 库中执行
|
||
mkdir -p .obsidian/snippets
|
||
cat > .obsidian/snippets/chinese-italic-kaiti.css << 'EOF'
|
||
/* 定义中文斜体专用字体 */
|
||
/* Copyright (c) 2025 Github@ArenaDruid | MIT License */
|
||
@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]]
|
||
<img >
|
||
---
|
||
|
||
## ⚙️ 高级配置
|
||
|
||
### 自定义字体
|
||
```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
|
||
|
||
---
|
||
|
||
## 📜 协议许可
|
||
[](https://creativecommons.org/licenses/by/4.0/)
|