style: 标题编号字号改成与各级标题一致(3.2.63)#30
用户反馈 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,后台可见更新。
This commit is contained in:
+35
-16
@@ -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 宽度一致,多行标题才不会看着参差 */
|
||||
|
||||
Reference in New Issue
Block a user