试用一个示例
下载 CSS,为内容容器添加 .type-recipe 类,再在实际设计中核对。
导出带作用域的排版 CSS 与可校验 JSON 配方。
使用本机已安装字体试排样文;设置仅保留在当前页面,切换工具前可导出 JSON 配方,不请求远程字体。
/* Letterkind · root reference: 16px. No root override or remote fonts. */
.type-recipe {
font-family: "Avenir Next", "Segoe UI", "PingFang SC", sans-serif;
font-size: 18px;
line-height: 1.6;
letter-spacing: 0em;
max-width: 60ch;
font-weight: 400;
overflow-wrap: anywhere;
}
.type-recipe p { margin-block: 0 1em; }
.type-recipe h1 { font-size: 48.82813px; font-size: 3.05176rem; line-height: 1.2; margin-block: 1.4em .5em; }
.type-recipe h2 { font-size: 39.0625px; font-size: 2.44141rem; line-height: 1.2; margin-block: 1.4em .5em; }
.type-recipe h3 { font-size: 31.25px; font-size: 1.95313rem; line-height: 1.2; margin-block: 1.4em .5em; }
.type-recipe h4 { font-size: 25px; font-size: 1.5625rem; line-height: 1.2; margin-block: 1.4em .5em; }
.type-recipe h5 { font-size: 20px; font-size: 1.25rem; line-height: 1.2; margin-block: 1.4em .5em; }
A little space changes everything. Good typography helps ideas find their rhythm. Try your own headline, paragraph or a few words in another language. 留一点空间,让文字更好读。
字体显示取决于本机安装;ch 不等于准确字数,导出的 rem 标题假设使用所选根字号参考值。使用前请在实际页面核对。
配方把预设字体、字号层级与间距组合到固定的 .type-recipe 类中。
下载 CSS,为内容容器添加 .type-recipe 类,再在实际设计中核对。
CSS 不含字体下载或全站重置,配置仅保留在页面内存,需导出后保存。
不会。处理在浏览器本地进行;托管服务仍会接收网页和静态资源的常规请求。
使用当前工具的下载按钮,或通过浏览器打印。座位计划、记忆卡片和文档草稿会保存在本机,详见隐私说明。
无需注册、付费 API 或订阅,中英文页面使用相同功能,根目录固定展示英文。