diff --git a/assets/css/site.css b/assets/css/site.css index a3e047c..29a7986 100644 --- a/assets/css/site.css +++ b/assets/css/site.css @@ -227,28 +227,38 @@ * 编号是**独立 span**,不是改标题文本 —— 所以不进编辑器、不进 RSS、 * 不进搜索结果、不进摘要。作者手写编号时压根不插这个 span。 * - * ── 为什么用灰色小号(用户选定的方案)────────────────────────── + * ── 为什么用灰色(用户选定的方案)────────────────────────────── * 标题的核心是**文字本身**,编号只是索引辅助。若与标题同色同粗, - * 视觉上"1.1"会和标题正文抢注意力,长文章里满屏都是粗体数字。 - * 灰色 + 小一号让编号退到背景,眼睛扫标题时能忽略它、需要定位时 - * 又能看见 —— 这也与目录里 `.yang-toc-num` 的处理一致(同为灰色小字), + * 视觉上"1.1"会和标题正文抢注意力,长文章里满屏都是数字。 + * 灰色 + 字重 400 让编号退到背景,眼睛扫标题时能忽略它、需要定位时 + * 又能看见 —— 这也与目录里 `.yang-toc-num` 的处理一致, * 正文和目录的编号看起来是同一套东西。 * - * ── 字号为什么要跟标题走而不是写死 ───────────────────────────── - * 编号要跟着标题一起缩放才有"附属于标题"的感觉。这里用 em: - * 0.62em 在 h2(24px)上是 14.9px、h3(20px)上 12.4px, - * 正好落在 12~15px 这个"能看清但不抢眼"的区间。 - * ⚠️ 若写成固定 px,h2 的编号会显得太小、h3 的又偏大。 + * ── 字号是 1em(与标题完全同大,3.2.63 起)──────────────────── + * 🔴 0.62em 那一版**用户否掉了**:「字体不能太小,要不然很不协调,看着难受」。 + * 实测 0.62em 在 h2 上是 14.88px、而标题 24px —— 差 9px,比例失衡, + * 编号像"贴在标题边上的小注脚",不像标题的一部分。 + * 改成 1em 之后:h2 编号 24px、h3 20px、h4 17px,与标题逐级同大。 + * 弱化只靠**颜色 + 字重**(灰 #a8abb2 / 400),不靠缩字号。 + * + * ⚠️ 换成 1em 有个连带项:`margin-right` 原来是 0.35em, + * 而 em 是相对**编号自身**字号的。字号从 14.88 → 24 后, + * 同一个 0.35em 会从 5.2px 变成 8.4px,间距明显偏大。 + * 所以同步收到 **0.25em**(24px ⇒ 6.0px、20 ⇒ 5.0px、17 ⇒ 4.25px), + * 与原来 5.2px 的观感基本一致。 * * ── font-weight / font-style 必须显式重置 ──────────────────── * span 会继承标题的 font-weight(700/600)和可能的斜体。 * 不重置的话"灰色但加粗"仍然很重,弱化就白做了。 * - * ── margin-right 用 0.35em 而不是固定 px ──────────────────── - * 同样是为了跟标题字号联动;h2 的 24px ⇒ 8.4px,h3 的 20px ⇒ 7px, - * 在两级上都刚好是"一个空格多一点"的呼吸感。 + * ── 🔴 为什么仍保留 `display: inline-block` ──────────────────── + * 这一条最初是为了修「小字号撑高行盒」,字号改成 1em 之后 + * **同字号本身已经不撑高了**(实测 inline + inherit 也是 46px)。 + * 但仍然保留,两个理由: + * ① 防回归 —— 以后谁把字号改回小号,不会立刻复发 3px; + * ② 编号成为原子盒,永远不跨行断开,始终贴在标题第一行开头。 * - * ── 🔴 为什么必须 `display: inline-block`(这是本规则最不直观的一处)── + * 下面是当时那个 3px 问题的完整记录,留着是因为**修法不直观**: * 小字号的行内元素会把行盒**撑高**,实测 h2 46 → **49px**、h3 37 → **40px**, * 每级都多 3px。3px 不起眼,但它出现在**每一个**标题上:长文 10 个二级标题 * 就多出 30px,h2 的灰底跟着变高,整篇标题的节奏全变;更麻烦的是它**只在 @@ -284,12 +294,21 @@ * yang_toc_scan() 的结果里(它们是 [Archives] 渲染时才产生的), * 所以天然不受影响。评论区 h3 同理(不在 .content 内)。 */ .k-main .details .article .content .yang-h-num { - /* 🔴 原子行内盒:不参与行盒的半行距计算,标题高度才不会被撑高(见上) */ + /* 🔴 原子行内盒:不参与行盒的半行距计算,标题高度才不会被撑高(见上) + * + * 3.2.63:字号改成 1em(与标题同大)。用户反馈 0.62em 太小、"很不协调"。 + * 实测同字号之后,inline / inherit 也不会撑高了(撑高本来就是小字号的 + * 半行距造成的,字号一致时半行距也一致)。但 display 仍保留 inline-block: + * ① 防回归 —— 以后若有人把字号改回小号,不会立刻复发 3px 问题; + * ② 编号变成原子盒,永远不会跨行断开,始终贴着标题第一行开头。 */ display: inline-block; line-height: 1; - margin-right: 0.35em; + /* 🔴 margin-right 是相对**编号自身**字号的(0.35em 在 14.88px 时是 5.2px)。 + * 字号改成 1em 后同一个 0.35em 会变成 8.4px,间距明显偏大 ⇒ 同步收到 0.25em + * (24px 标题 ⇒ 6.0px,20px ⇒ 5.0px,17px ⇒ 4.25px,与原来的观感接近)。 */ + margin-right: 0.25em; color: #a8abb2; - font-size: 0.62em; + font-size: 1em; font-weight: 400; font-style: normal; /* 数字等宽,1.1 和 3.10 宽度一致,多行标题才不会看着参差 */ diff --git a/style.css b/style.css index f6f18fe..419bfa0 100644 --- a/style.css +++ b/style.css @@ -1,7 +1,7 @@ /* Theme Name: Kratos_Yang Text Domain: kratos_Yang -Version: 3.2.62 +Version: 3.2.63 Requires PHP: 7.0 Description: 这是一个Kratos主题的分支版本,用来增加一些定制化功能。 Tags: 博客, 双栏, 响应式, 自定义背景, 自定义颜色, 自定义图标, 自定义菜单, 特色图像, 收录优化, 邮件中心, 主题选项, 小工具, 文章置顶, 无障碍友好