做了一个网页小工具：用纯 CSS 实现 InDesign 那样的「复合字体」。
汉字、假名、标点、西文、数字，分别指定字体、大小和基线，边看校样边调，最后导出可以直接粘贴的 CSS。不用插件，免费开源。
https://charlie5188.github.io/css-composite-font/
复合字体工坊怎么用？纯 CSS 实现中西文混排，网页字体搭配教程
复合字体工坊（Composite Font Studio）是一款免费开源的网页小工具，用纯 CSS 实现类似 InDesign「复合字体」的中西文混排效果。它允许你为汉字、假名、西文、数字和标点分别指定字体、大小与基线，边看校样边调整，最后导出可直接粘贴到网站的 CSS，或生成供设计、办公软件使用的 TTF / OTF / WOFF2 字体文件。工具完全在浏览器内运行，不上传字体文件，支持搜索 Google Fonts 与本机字体，也可导入自有字体文件，并能在选用前查看字体资料与字符集覆盖率。界面提供英文、简体中文、繁体中文与日文，无需注册账号即可保存预设或分享可继续编辑的配置链接，项目以 MIT 协议开源，源码托管在 GitHub。
痛点是什么
做中文网页或排版时，中西文混排几乎是绕不开的难题。CSS 的 font-family 回退机制只能为每个字符挑选字体，却无法平衡不同字体之间的大小与基线，结果常常是汉字偏大、西文偏小，数字和标点高低不齐，整段文字看起来松散杂乱。设计师若想精细调整，往往要回到 InDesign 里做复合字体，再把结果手动搬回网页，流程割裂且难以复用。对没有专业排版软件的前端开发者来说，想做出舒服的中西文混排效果，更是缺少一个轻量、免费、能直接产出 CSS 的工具。
主要功能特点
复合字体工坊围绕「按字符类别搭配字体」这一核心思路，把字体选择、实时校样与导出串成一条完整流程，覆盖从调试到落地的常见需求。
按字符类别精细搭配
可为汉字、假名、西文、数字和标点分别设定字体、大小与基线，还能添加例外字符。
跨字重自动匹配平衡
自动调整大小、基线与可用字重，支持按档微调及可变字体的连续字重范围。
边编辑边实时校样
直接编辑校样正文，实时检查中西文混排、缺字与地区排版差异。
一键导出 CSS 与字体文件
生成可直接粘贴的 CSS，或导出 TTF / OTF / WOFF2 供设计与办公软件使用。
为什么值得关注
它把过去只在专业排版软件里才有的复合字体能力搬到了浏览器，免费开源、无需插件，对前端开发者和中文排版爱好者都很友好。
纯 CSS 落地，无需插件
导出的 CSS 可直接用于网站，不依赖任何插件或额外运行时。
本地处理，保护字体隐私
字体处理全在浏览器内完成，文件不上传，兼顾隐私与使用便利。
免费开源，可自由使用
项目以 MIT 协议开源，个人与商业场景均可按协议自由使用与修改。
推荐信息
小神
@godling_zlm 2026年10月22日 12:40
