From 0c8cee909414edd5eaa54c0d9375d10c2cbc2e99 Mon Sep 17 00:00:00 2001 From: laoyang Date: Wed, 28 Oct 2026 08:59:31 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E6=A0=87=E9=A2=98=E7=BC=96=E5=8F=B7?= =?UTF-8?q?=E5=AD=97=E5=8F=B7=E6=94=B9=E6=88=90=E4=B8=8E=E5=90=84=E7=BA=A7?= =?UTF-8?q?=E6=A0=87=E9=A2=98=E4=B8=80=E8=87=B4=EF=BC=883.2.63=EF=BC=89#30?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 用户反馈 0.62em 那版太小、"很不协调，看着难受"，要求字号和每一级标题一样。 改动： - .yang-h-num 的 font-size 从 0.62em 改成 1em： h2 编号 24px、h3 20px、h4 17px，逐级与标题同大。 弱化只靠颜色（#a8abb2）和字重（400），不再靠缩字号。 - margin-right 从 0.35em 收到 0.25em：em 是相对编号自身字号的， 字号从 14.88 变 24 后同一个 0.35em 会从 5.2px 涨到 8.4px，间距偏宽。 - display:inline-block + line-height:1 保留：实测同字号后已不撑高， 但留着防回归（以后改回小号不会复发 3px），且编号成原子盒不跨行断开。 - site.css 与 readme 的相关注释同步重写，删掉过期的「落在 12~15px 区间」。 验证（全部在线上真实文章页上量实际渲染值）： - 几何 71/0：h2 24/24、h3 20/20、h4 17/17，逐级与标题相等； 标题高度加/不加编号差 0.00px；编号与文字不重叠、不跨行。 - 三条反证全部红在预期条目：小字号+inline+inherit（3.00px）、 display:block（24.00px）、字号回 0.62em（G8）。 - 编号判据 44/0、真实数据 20/0、目录等价 7/0、反证 22/0。 - 打包自检 61/0，注入反证 8/0（含新增的字号/margin 两组）。 - PHP 语法 97 个文件 0 错。 包：kratos_yang-3.2.63.zip md5 ce757f325c0928f44d0e053d834c7da7 已发到 /theme-update/，update.json 已切 3.2.63，后台可见更新。 --- assets/css/site.css | 51 +++++++++++++++++++++++++++++++-------------- style.css | 2 +- 2 files changed, 36 insertions(+), 17 deletions(-) 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: 博客, 双栏, 响应式, 自定义背景, 自定义颜色, 自定义图标, 自定义菜单, 特色图像, 收录优化, 邮件中心, 主题选项, 小工具, 文章置顶, 无障碍友好