排版和字体改进说明

排版和字体改进说明

改进内容总结

1. 字体系统优化

中文字体支持：添加了完整的中文字体栈，包括：
- PingFang SC (苹果系统)
- Microsoft YaHei (微软雅黑)
- Source Han Sans SC (思源黑体)
- Noto Sans CJK SC
- WenQuanYi Micro Hei (文泉驿)
英文字体：保留了系统默认的优质英文字体
字号：基础字号从 16px 提升至 17px，提高可读性

2. 标题层级优化

统一标题样式：
- H1: 2.2em，带底部边框
- H2: 1.75em，带底部边框
- H3-H6: 层级递减
颜色优化：标题使用 #2c3e50 深色，提高对比度
间距改善：标题上下边距更加合理，视觉层次更清晰

3. 段落和行距优化

行高提升：从 1.5 提升至 1.8，阅读更舒适
段落间距：设置为 1.5em，内容区分更明显
字间距：添加 0.3px 字间距，视觉更通透
文本对齐：段落采用两端对齐

4. 列表样式改进

列表项间距增加至 0.8em
行高统一为 1.8
嵌套列表样式优化

5. 链接样式优化

颜色：使用 #3498db 蓝色，更加醒目
悬停效果：颜色变为 #2980b9
过渡动画：添加 0.3s 平滑过渡

6. 代码块优化

等宽字体：Consolas, Monaco, Courier New
背景色：浅灰色背景，边框分隔
圆角：3-5px 圆角，更加美观
代码块内边距：1em，内容不拥挤

7. 引用块美化

左侧蓝色边框（4px）
浅灰色背景
圆角设计
斜体文字

8. 表格样式改进

斑马纹：奇偶行不同背景色
悬停效果：鼠标悬停时高亮显示
表头：浅灰色背景，加粗文字
边框：统一的细边框

9. 侧边栏优化

头像：添加边框和圆角
作者名字：字号和字重优化
简介文字：行高和颜色调整
链接样式：悬停效果改进

10. 响应式设计

移动端适配：
- 768px 以下屏幕字号适当缩小
- 标题大小自动调整
- 内边距响应式调整
打印样式：优化打印输出

修改的文件

新建文件：_sass/_custom.scss
- 包含所有自定义样式
修改文件：assets/css/main.scss
- 添加了 @import "custom"; 导入自定义样式

如何查看效果

启动 Jekyll 服务器：
```
bundle exec jekyll serve --port 4000
```
在浏览器中访问：
```
http://localhost:4000
```
查看主页和其他页面，对比改进效果

主要改善点

✅ 可读性大幅提升：更大的字号、更宽的行距 ✅ 中文显示优化：完整的中文字体支持 ✅ 视觉层次清晰：标题层级分明，间距合理 ✅ 现代化设计：圆角、阴影、过渡动画 ✅ 响应式友好：移动端和桌面端都有良好体验 ✅ 代码展示美观：代码块样式优化 ✅ 链接易于识别：明确的颜色和悬停效果

技术特点

模块化设计：自定义样式独立文件，便于维护
不破坏原有结构：通过覆盖样式实现，不影响主题更新
CSS3 特性：使用现代 CSS 特性（flexbox、transition、linear-gradient 等）
浏览器兼容：支持主流现代浏览器

后续优化建议

可以根据个人喜好调整配色方案
可以添加深色模式支持
可以进一步优化特定页面的样式（如出版物列表、教学页面等）
可以添加动画效果让页面更生动

修改日期：2026年1月23日