进阶定制medium.css换主题色、扩展自定义类的实用技巧全清单【免费下载链接】medium.cssCompact typography for the web项目地址: https://gitcode.com/gh_mirrors/me/medium.cssmedium.css是一款为 Web 打造的极简排版样式表用不到 100 行 CSS 复刻了 Medium.com 的阅读体验。装好它只是起点——本文是一份完整指南教你 5 分钟学会给 medium.css换主题色、扩展自定义类让博客和文档的排版瞬间拥有品牌感。一分钟认识 medium.cssmedium.css 的核心思路是字体 颜色 间距三件事做到极致。它覆盖的 HTML 元素包括h1、h2、p、a、i、mark、blockquote、code并内置了三个开箱即用的工具类类名作用.highlighted给文字加荧光背景色突出重点.first-letter首字母大号花体字跨两行杂志感拉满.subtitle标题下的灰色副标题所有样式集中在 medium.css 一个文件里这也是定制的关键前提——文件足够小随便改都不会翻车。换主题色找到 3 个颜色开关medium.css 里一共只有 3 处颜色值找到它们就等于拿到了全部主题色开关正文文字色——rgba(0, 0, 0, 0.84)定义在 medium.css 第 14~18 行的h1, h2, p, i, a公共规则里。Medium 官方刻意不用纯黑84% 的黑色在白底上对比度最佳且不刺眼。想换品牌色只改这一处标题和正文会同步变化。高亮背景色——#7DFFB3定义在 medium.css 的mark, .highlighted规则里。想换成品牌色比如淡蓝色改成#B3D9FF即可mark和.highlighted会一起生效。选中文字色——lavender定义在 medium.css 最后一行的::selection规则里改一个单词就能让划词瞬间变高级。小技巧副标题的灰色rgba(0, 0, 0, 0.54)在 medium.css 的.subtitle里属于辅助色建议比正文色浅一个档次制造层次而不抢戏。更换字体三段式字体体系medium.css 模仿了 Medium 的三段式字体策略见 README.md 的 Fonts used 章节正文字体Lora衬线体负责长时间阅读UI 字体Lato/Montserrat无衬线负责小字号界面文字和h2品牌字体Playfair Display衬线负责h1、引用块和首字母花字。想换字体只需两步① 修改 medium.css 第 1 行的 Google Fontsimport引入新字体② 全局替换font-family声明。新手建议只换正文衬线字体保留标题字体不变效果最稳妥。扩展自定义类3 步复制法medium.css 的定位是起点而非终点README 原文如此扩展一个自己的工具类只需 3 步复制一份把 medium.css 复制为my-theme.css避免升级 npm 包时丢失修改照着写以 .subtitle 类 为模板它只声明了font-family、color、margin三个属性正是克制的美——你的新类也建议不超过 5 个属性用起来在 HTML 里像.highlighted一样直接span class我的类名即可无需任何 JS。比如想做一个品牌徽章类仿照.highlighted加个backgroundpaddingborder-radius三步就完成与内联code元素的写法medium.css思路完全一致。排版微调清单行高、字距与行宽想让中文博客更接近 Medium 的呼吸感按这张清单逐项调整属性默认值位置建议line-height1.58正文规则中文排版可微调到 1.7letter-spacing-0.03px正文规则中文建议设为 0 或 0.05em正文字号21px正文规则移动端可降为 18px首字母花字60px.first-letter中文首字可放大到 2.5em项目作者特别强调过一条铁律每行文字长度不要超过 740px。demo 页面 main.pug 里专门用虚线框标注了行宽medium_extended.css 中.container的栅格布局也是以 740px 为基准列宽设计的——定制布局时守住这条线眼睛就不会累。本地跑通 Demo边改边预览最靠谱的定制方式是在真实页面里看效果。项目自带完整的本地演示git clone https://gitcode.com/gh_mirrors/me/medium.css cd medium.css/demo npm install npm start启动后 Parcel 会热更新预览页面页面结构写在 demo/src/main.pug扩展版样式在 demo/src/medium_extended.css——后者在前 91 行与主文件完全一致从第 91 行开始是栅格布局正好可以作为你学习基础排版类 布局类如何分层的范例。改完 CSS 刷新即可看到花体首字母、荧光高亮、引用块的全新配色。定制速查清单想做什么改哪里全局换文字色medium.css#L16 的rgba(0, 0, 0, 0.84)换荧光笔颜色medium.css#L71 的#7DFFB3换划词颜色medium.css#L91 的lavender换字体medium.css#L1 的import调行高字距medium.css#L38-L44加自定义工具类仿照 .subtitle 复制到你的主题文件本地预览demo/目录 Parcel 热更新medium.css 用 MIT 协议开源复制、修改、商用都自由。记住核心心法颜色只留 3 个开关、字体只分 3 个角色、行宽守住 740px——把这三条刻在脑子里你的排版就已经赢了 80% 的默认模板。【免费下载链接】medium.cssCompact typography for the web项目地址: https://gitcode.com/gh_mirrors/me/medium.css创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考