加载中...
HEADINGS

标题排版试验场

这里管标题的三枚令牌:标题字体 font.display、大标题字号上限 type.h1、小标题字号 type.h2。样张在最上面,按文章页标题区的真实排版公式渲染——下面的旋钮一动,样张立刻跟着换装;旋钮都只算试穿,到底部点「应用」才写进这台浏览器。返回 Playground。

样张

POSTS 2026-10-16
Meyer & Rowan 1977《Institutionalized Organizations》
欧洲如何接入互联网文章 h2
Claude如何掌握多语言文章 h3

笔记页不在此复刻,只记两条事实:笔记标题按 calc(var(--mc-h1) * 0.65) 取得字号(跟随左下滑杆缩放),年份水印固定 7rem、不随任何令牌缩放。样张公式:标题 clamp(calc(var(--mc-h1) * 0.765), 5vw, var(--mc-h1)),h2 var(--mc-h2),h3 calc(var(--mc-h2) * 0.84)。

标题字体

次要字体(标题与展示)font.display

标题字号

大标题字号(上限)type.h1

小标题字号type.h2

标题字体的候选介绍与设计思路

与主站排版的联动

font.display--mc-font-displaypost-layout.css / note-layout.css 内 var():文章标题 .post-content-title、笔记标题与年份水印
type.h1--mc-h1文章标题 clamp(calc(var(--mc-h1)*0.765),5vw,var(--mc-h1));笔记标题 ×0.65;年份水印固定 7rem 不缩放
type.h2--mc-h2文章 h2 var(--mc-h2)、h3 ×0.84;笔记 h3 var(--mc-h2)、h4 ×0.8

生效路径:本页与全站各页实时生效(试穿 preview 只写 <html> 上的 CSS 变量);点「应用」写 localStorage,其余已打开的页面刷新后由头部 boot 应用;URL 直达(如 /playground/headings/?type.h1=3.8)进本页自动转为试穿态。滑杆取值域来自注册表:type.h1 ∈ [2.2, 4.4]rem 步进 0.1,type.h2 ∈ [1.2, 2.0]em 步进 0.05。

avatar
Martian Cats
个人博客,记录生活与技术点滴。
Follow Me
最新文章
网站信息
文章数目 :
27
本站访客数 :
本站总浏览量 :
最后更新时间 :