匹配规则
同一个 font-family 下可以写多条 @font-face。浏览器为每个字符从最后一条往前找,选第一条 unicode-range 包含它、且字体里真有这个字形的规则。所以基础字体(汉字)写在最前,不限范围,负责兜底;半角西文、半角数字等字符类别写在后面接管各自的范围;例外字符写在最后,优先级最高。
字符类别行保留名称和必要的状态;各字符类别涵盖的字符可在「字符类别」说明及分组设置中查看;半角数字仅含 0–9,全角数字属于全角符号。预设卡片名称描述字体搭配,简繁与地区由标签区分。顶栏「分享」左侧的齿轮打开「设置」,校样的「显示」菜单控制预览。
字体名前的灰色闪烁点表示正在加载,红点表示加载失败;悬停或用键盘聚焦可查看说明与具体失败原因。状态对应当前预览实际使用的字体;连续模式读取整条可变字重轴的加载结果。加载完成后状态点隐藏,跟随其他字符类别的字体不另显示状态点。
预设与保存
列表首张「当前配置」卡片显示正在编辑的搭配,不受筛选影响。「存为新预设」会按当前主要字体组合填入可修改的名称,重名时自动加序号,可以直接保存副本。没有预设名称时,卡片也显示同一建议名称;已有名称保留。编辑自己的预设时,「保存修改」会在有修改时启用,再次点击确认后更新原预设。另存默认新建副本;输入已有名称时会提示,并需再次确认覆盖。
预设只保存在当前浏览器,不包含字体文件。筛选只作用于后面的预设列表;没有匹配项时仍可保存当前配置。切换预设前会提醒保存尚未保存的修改。保存失败时保留编辑内容和已有预设。
外观与校样颜色
顶栏齿轮里的「外观」可选浅色、深色或跟随系统。跟随系统时会响应系统配色的变化。校样工具栏的「显示」菜单可用色板或十六进制色码自定义背景色与文字颜色,即时应用到校样和度量图;编辑区与工具栏继续使用主题配色。离开颜色框时,无效输入会恢复为上一次有效颜色。「恢复默认颜色」会清除自定义颜色,恢复当前主题的默认颜色。颜色可独立设置,切换主题时保留自定义值。 设置与显示弹层按功能分组,标签、控件和说明使用统一的对齐与间距。
这些是当前浏览器的外观偏好,刷新、换预设、撤销或导入分享后会保留,不随预设保存或分享,也不影响导出的 CSS、应用代码和字体文件。
分享配置
顶栏「导出」左侧的描边「分享」按钮会复制当前配置的链接,无需先存为预设。链接保留点击分享时的字体、大小、字重、基线、可变轴、字符分组、例外字符、排版及导出设置;后续编辑不会改变已经发出的链接。
链接不包含字体文件、自定义校样正文、历史记录或其他已存预设。接收方会看到内置校样,可以继续编辑或另存预设,也可撤销导入恢复原配置。Google Fonts 会重新加载;本机字体需要接收方安装,上传字体需要重新提供文件,缺失时在字体页提示。配置直接保存在链接片段中,无需服务器存储;链接过长时会提示,剪贴板不可用时可手动复制。
大小:size-adjust
size-adjust 按百分比缩放一个字体的字形和度量。Chrome/Edge 92+、Firefox 92+、Safari 17+ 支持。它也会放大这个字体的上伸、下伸度量,line-height: normal 时行距可能不均匀,建议写固定的 line-height。
「基础设定」里的大小和基线,以及「各字重」里的大小,都可直接输入数值,或用输入框右侧的上下箭头每次增减 0.5。键盘按住 Shift 再按 ↑↓ 时,每次增减 5。清空输入框可恢复继承值。箭头在悬停或聚焦时出现,触屏上常显;显示与隐藏不会改变数字的对齐位置。
基线偏移需要 JS
@font-face 没有基线描述符。同一行里所有字形都对齐在字母基线上,CSS 无法按字体单独移动。工具里的「基线」会在导出时附带一段脚本,把对应字符包进 <span> 用相对定位移动,不影响行高。想要纯 CSS,就把所有基线保持为 0。
自动调整
「基础设定」右上角的「自动调整」会按字符类别匹配独立指定的字体,汉字基础字体保持不变。跟随项继承来源字符类别的结果,已有的大小、基线覆盖保留。所有需要匹配的字体与参照相同时,提示无需调整,不改现有设置。结果可微调,整次操作可一次撤销。操作提示从屏幕底部滑入,停留后淡出;系统开启「减少动态效果」时直接显示。
参照。西文以汉字字体自带的西文为参照,兼顾大写字母和小写 x 的高度,缺少字母时按汉字字面估算;独立数字对照本次调整后的西文数字。假名、全角标点、符号、注音及独立的中西共用标点,对照汉字字体中的同类字符。假名、数字、注音比较对应字符的高度;全角标点、符号与共用标点按对应字符的字身宽度匹配大小,再匹配字形的位置,保留标点的小字面与地区位置。不是把所有字符都放大到汉字高度。
例外字符。仅自动匹配原属同一字符类别、最多 64 个字符的独立例外组,以原字符类别当前字体中的相同字符为参照。混合字符类别、未归类字符、范围过大或缺少可靠对应字形时,保留原设置并提示。任一待测字重缺少参照时,保留该字符类别的全部设置,避免基础设定的改动间接影响未能测量的字重。
字重与基线。分档模式在最终大小下比较同类字符的笔画粗细,选择更接近的可用字重,并避免同一字体的粗体比正文更细。西文使用 H、h 的主干,其他字符类别使用多个对应字符的横纵截面估算;它们都只是视觉匹配的起点。支持 Google Fonts 和带字重轴的本机/上传字体;连续模式、单一字重或量不到可靠笔画时保留粗细。按选中的导出字重测量,并始终测量 400:400 写入基础设定,其他档的大小与基础相差至少 0.5 个百分点时单独保存。基线只保存基础值,小于 2% em 的偏移设为 0;网页偏移需要 JS,字体文件直接写入位置。旧版浏览器仍可自动匹配字重;若无法测量所选的其他可变轴,该字符类别保留原设置并提示。
局部重置与限制。「各字重」字符类别标题旁的重置按钮恢复该字符类别的基础大小 100%、基线 0 和最接近常规 400 的可用字重,并清除逐档大小、粗细与独立字体覆盖。保留基础字体选择、其他可变轴、其他字符类别、共享字体名映射、导出勾选及预览字重,可撤销。自动调整不会创造缺失字重,也不会改变导出勾选。字形风格、衬线反差及设计比例仍需在正文中判断,必要时手动微调或更换字体。
选择字体
字体库纳入随页面提供的官方元数据中所有标注支持简体中文、繁体中文、香港中文或日文的 Google Fonts 字族,并保留原有常用西文与韩文字族。更新元数据时目录一起更新,不在每次打开时实时抓取 Google 全站。列表字样只加载可见项,选中后再加载详细预览;无需预先下载全部字体。 排序入口位于列表上方、候选数量右侧,使用无描边按钮显示当前方式;筛选栏只保留筛选条件。 「字体库」合并 Google Fonts 与浏览器读取到的本机字体,标注来源,同名字体可分别选用。已知的本语言名称显示在英文名后,搜索别名明确标为别名;无可靠资料时保留原名。搜索名称、别名、本机完整名或 PostScript 名,忽略大小写、全半角、空格、连字符和下划线。默认按名称 A–Z 排列,可切换已知字重范围广到窄,未知范围置后。后来发现的字体追加到末尾;后台检查不移动已有候选,主动切换排序时重新排列。切换保留搜索、筛选与当前试看字体。 列表样张优先展示字体的主要文字:日文混排汉字、平假名与片假名,简繁中文、韩文和西文各用对应文字。Google Fonts 优先使用官方主要文字资料,本机已知名称作补充;语言未知时保留字符类别样张。右侧预览仍按正在编辑的字符类别显示。少量字重简写为 400/700。
列表与预览以分隔线区分,桌面为竖线、窄屏为横线。来源和字重信息位于列表项右上;窄列表会换到名称下方并靠右。分档只有一至两档时直接列出字重,更多档位显示数量与范围。未读取的本机文件只显示已发现字重,不推断连续或分档。 「含意大利体」筛选要求字体提供 Italic 款式或 ital 轴,不把 Oblique、单独的 slnt 轴或浏览器模拟倾斜算作意大利体;未知资料保留,不扫描所有字体文件。此筛选不改变导出设置。 页脚的「应用后自动调整以匹配汉字」默认勾选,只在确认使用字体后执行;取消对话框不应用。 覆盖筛选聚焦于简体汉字、繁体汉字、日文汉字、假名、全角标点、全角符号和注音;西文字母、数字与中西共用标点的缺字仍在选中字体后的校样检查中提示。 「字重类型」包含连续(VF)、分档,以及「支持粗体」。类型组内任选;支持粗体作为附加条件,须同时满足。风格包括黑体、宋/明体、仿宋、楷体、圆体、教科书体、手写及书法;使用已知设计和明确名称规则,支持多标签,不改变合成设置。字符类别中的汉字拆为简体、繁体与日文汉字,可同时选择,复用字体详情的代表字;它们表示字符覆盖,不代表当地字形标准。所选代表字符须全部确认覆盖;启用覆盖筛选时不显示未检查的字体,清除筛选可查看。Google Fonts 使用随页面附带的 CSS 范围,本机字体复用已完成的默认款式检查;不保证全字库均无缺字。新结果在下次搜索或筛选时应用,不在后台移除候选。列表与预览共用本机字重信息:汇总 Regular、Bold 等明确款式,读取字体后优先采用实际字重及连续轴范围,原地更新标签;不扫描所有本机文件,不自动重排。 手写筛选直接采用 Google Fonts 官方的 Handwriting 分类,不再归入“其他”。Zhi Mang Xing、Long Cang 和 Liu Jian Mao Cao 另依官方说明归入书法;可同时拥有多个风格。仿宋、楷体、书法等细分含名称推断,菜单内标明仅供参考;未知资料仍保留。 缺字在选字样张内以波浪线标记。基础设定只选择字体,粗细在「各字重」中调整。样张工具栏的字重和字号只用于试看。从某一字重行进入选字时,可直接指定该档使用的字体字重,也可选择替换该字符类别的全部字重。可变轴直接显示在右侧页脚,对这个字符类别的所有字重生效;点击「使用这个字体」后保存,关闭或取消不保存。
首次打开字体库时自动尝试读取本机字体,需要通过浏览器的字体访问授权;浏览器也可能要求本次点击触发读取。本页读取成功后复用结果,只有失败时显示重试;不支持接口的浏览器可直接在搜索框输入完整名称。读取结果按家族与款式分组,选择时再读取可变轴。右侧所选字体下方的「字体款式」用于选择 Regular、Bold、Italic 等实际款式,只有多个款式时才显示。名称不能通过 CSS local() 加载时,尝试用已授权字体的数据预览;CSS 导出仍使用字体名。字样加载、字符检查与缺字分别提示;字样失败不表示字体未安装。筛选优先使用已知资料与名称中明确的风格、粗体信息,不会因为未读文件就认定字体不支持粗体。未验证的完整名称可尝试选用,加载失败会明确提示。字体列表与访问到的数据只留在当前页面会话。 后台字形和字重资料更新时,保留正在编辑的表格输入,避免重绘打断输入。
字体文件可以拖入或选择,导入后留在本页的字体列表,可搜索并用于其他字符类别或字重;重复的相同文件不会新增一项。能读取名称表时显示正式字族及样式,否则显示文件名。无效文件不会覆盖当前选择。列表与文件只保留在当前页面内,重新载入后需再次提供;预设和分享不包含文件。
基础设定只选择字体,粗细在「各字重」中调整。样张工具栏的字重和字号只用于试看。从某一字重行进入选字时,可直接指定该档使用的字体字重,也可选择替换该字符类别的全部字重。可变轴直接显示在右侧页脚,对这个字符类别的所有字重生效;点击「使用这个字体」后保存,关闭或取消不保存。
样张初始文字按正在编辑的字符类别和校样语言生成,可直接输入、换行或粘贴;切换候选及「预览/信息」保留草稿。缺字只按当前样张检查,以和主页相同的波浪线标记;悬停可查看缺字与系统补字的说明,不再统计主校样的缺字。检查不能完成时,仅在信息页说明无法确认。工具栏将 B 字重控件与字号放在一起:点击 B 或数字展开滑杆,也可输入、按方向键或拖动图标。连续字体支持范围内的数值及 400/700 快捷刻度,分档字体只选真实档位,单档字体保持该档。字重与字号均只用于试看;基础设定的粗细在「各字重」中调整。输入框随内容、字体、字号和栏宽自动增高;高亮不改写输入值,不影响光标和中文输入法。重新打开恢复字符类别样张,编辑不进入预设、分享或导出。 校样正文可直接点击编辑。首次修改内置样本时自动新增并选中一份自定义文本,继续输入只修改同一份;内置样本保持原样。自定义文本可切换、删除并在此浏览器保存,新增按钮可复制当前文本。支持换行、纯文本粘贴、输入法和文字撤销/重做;文字不进入字体配置、分享链接或导出。字体列表以电脑和 Google 图标表示本机与 Google Fonts 来源,悬停显示来源及字重详情。
选择非汉字字符类别时,默认勾选「自动调整以匹配汉字」。确认使用后,只按该字符类别的参照规则调整所选字符类别;数字参照西文,其他字符类别保留各自用途与比例。可取消勾选以保留原调整。单档选择只调整该档的大小与可调粗细,不改字符类别共用基线。测量完成后一次应用,取消不保存;缺少可靠参照时仅选用字体并提示保留调整。字体和调整可一次撤销。
桌面左右等宽,分隔线居中,两侧分别滚动。对话框顶部是「本地字库 + Google Fonts/字体文件」页签,下方采用宽屏工作区:左侧以更大的字样浏览候选,右侧用分隔线区分并显示所选字体的预览与设置,两侧分别滚动,不添加栏标题。搜索框下方直接显示「来源/风格/字重/字符集」筛选栏,已选条件保持可见;来源和风格均可多选,同组内任一项匹配即可,不同组需同时满足;未勾选代表不限制该组。清除筛选保留搜索文字,窄屏自动换行。弹窗上下仅保留小边距,底部操作始终可见。搜索和完整名称输入共用一个框:没有结果时,按允许的来源提供明确尝试操作;输入一半不会加载候选。缺字在样张内标记,检查失败收在信息页。列表无外框,以行间分隔线区分候选,底部与工作区对齐。右侧以「预览/信息」切换样张和来源、字重、主要文字及覆盖详情;信息不再列西文字母、数字、韩文徽标和缺字图例。确认与取消固定在右栏底部,自动调整位于按钮上方。窄屏上下排列,在同一工作区滚动,底部操作保持可见。 字体库未选字体时右侧显示空状态;文件列表为空时隐藏右侧,拖放区占满整个工作区,说明位于区内。导入后恢复左右布局,拖放入口收紧。可变轴位于右侧页脚的确认按钮上方,桌面长轴列表单独滚动;窄屏轴设置随工作区滚动,确认按钮保持可见。支持可变轴的字体使用「使用此配置」确认,其他字体使用「使用这个字体」。
信息页按名称、字体特征、作者与授权统一排列,可显示中文、英文及字体内提供的日文等其他语言显示名、家族、款式、PostScript 名、来源、字重、当前来源的家族款式数、Unicode 字符数量、等宽与可变类型、当前文件大小,以及字体内的设计师、出品方、授权说明和网址。字符数统计映射到非零字形的 Unicode 字符,不是字形总数。只在查看信息时读取所选本机文件;导入文件复用已有数据,不扫描整个本机字体库。TTF、OTF 和 WOFF 可读取完整表资料;WOFF2 及 Google Fonts 网页来源缺少完整资料时标为「当前来源未提供」,已读取但字体没有填写的字段标为「字体里没有提供」。不把搜索别名当成字体内名称,不用字形数冒充字符数,不推断授权。代表字符检测不等于完整语言支持;字体元数据只保留在本页,不进入配置、分享或导出。拖放区的文件类型及本地读取说明组成一个紧凑文字组,与选择按钮间隔 24px;导入后入口收紧。 桌面上字体名、款式及「预览/信息」页签固定,仅页签下方内容滚动;窄屏仍使用工作区统一滚动,详情标题与页签在详情范围内置顶。代表字符检测改用与其他资料一致的两列字段,显示每组支持数与检测总数;斜体信息归入字体特征。本机字体的预览字重可切换同一家族、相同倾斜和宽度款式中已安装的真实字重文件,支持已知分档;可变字体仍使用连续范围。不合成粗体,不扫描未选中的字体二进制;资料未知的字重不作猜测。预览不改变所选基础款式和配置。家族只有粗细区别时不再重复显示款式下拉框,存在斜体或宽窄等其他区别时保留。配套斜体文件入口位于配置页脚,说明其用于导出斜体、不会改变当前正体预览;只对西文、数字、共用标点或自定义字符类别等适用选择显示,已配对文件可继续替换。导入失败保留原配对,关闭或取消不应用。 字体内提供的其他语言显示名逐项列出;资料限制、风格推断、代表字符检测与授权说明合并在信息页顶部。选字窗口不再显示标点位置标签及名称解释。
搜索只筛选列表,并显示候选数量;没有结果不表示加载失败。列表外的完整名称需明确尝试,手动输入时不会检测半个名字。获取字体、加载字样、等待本机授权与失败分别显示状态;字样等待超过 12 秒会停止等待提示并提供重试,迟到结果不会覆盖新的选择。失败时保留候选与配置;未确认的本机字体仍可选用。字符检查失败显示未知,不当作全部支持。
本机字体:local()
local() 按字体的完整名或 PostScript 名匹配,而不是字族名。例如写 Hiragino Sans GB W3 或 HiraginoSansGB-W3,而不是 Hiragino Sans GB。Safari 只允许网页使用系统预装字体,自己安装的字体在 Safari 里不生效。访客电脑上没有这个字体时,会回退到前面一条规则。
Google Fonts
中日韩字体在 Google Fonts 上被切成上百个分片,每片有自己的 unicode-range。导出时工具会把分片范围和字符类别范围求交集,只保留需要的分片,所以西文字符类别通常只剩一两条。url 指向 fonts.gstatic.com,正式项目建议下载后自托管。
导出多个字重
字体名下用「连续字重」「分档字重」说明可用的粗细:连续字重可在范围内输入任意值,例如「连续字重 200–900」;分档字重只有固定档位,例如「分档字重 400、700」,档位较多时显示最轻到最重的范围,悬停可查看完整档位。这些标注说明字体本身的能力;导出模式在「各字重」里另选。范围无法准确读取时不推测,已知存在可变轴但字重范围不明时标为「字重范围未知」。跟随其他字符类别的字体信息看来源行。
连续模式下,预览或网页设为 font-weight: 450,可变字体就显示 450,不必只选 400 或 500;超出字体支持范围时使用最近的端点,静态字体使用最接近的一档。可变字体的单独粗细调整暂不生效,切回分档即可恢复。
滑杆统一使用与按钮一致的黑白配色,横向轨道两端与滑块中心及刻度对齐。连续模式在表格左侧拖动两个滑块,按 100 一档选择导出范围。范围外的行保留并置灰,已有调整不会丢失;范围内仍包含中间字重。精确端点可在「导出」中输入。键盘方向键每次移动 100,配合 Shift 每次移动 10。拖动在松手时保存,可一次撤销,Esc 取消本次拖动。表格只有大小列时,使用「汉字大小」「半角西文大小」等单行表头;有静态字体可调粗细时,保留字符类别与粗细、大小两级表头。
分档模式下,在「各字重」里勾选要导出的字重(导出对话框里也能选),每个字重各生成一组规则。点击已勾选行的空白处即可预览该字重,不会改变导出勾选。点击校样工具栏的 B 图标或字重框可展开滑杆,也可直接输入数字或拖动 B 图标;数字会实时同步。分档模式只预览已勾选的字重,滑杆显示对应节点;连续模式在导出范围内无级调整,范围内的 400(Regular)和 700(Bold)刻度可点击跳转。范围端点与常用刻度统一显示在滑杆下方,过近的端点文字会省略。取消当前预览的字重时,自动切到最近的已勾选字重;输入范围外或未勾选的值,确认时也会收进可用范围。工具里设定的字体对应 400;其他字重里,Google Fonts 的字体按同样的差值换算(例如 500 的字体在 700 时取 800),没有这个字重就取最接近的;本机字体会按名称推测粗体(例如 W3 → W6、Regular → Bold),并在这台电脑上检测。各字体的粗细分布并不一致:「各字重」一览表里可以按字重单独调整各字符类别的大小和粗细。可变字体的粗细可直接输入任意数值,右侧箭头或键盘 ↑↓ 每次增减 10,Shift + ↑↓ 每次增减 100;静态 Google Fonts 字体按 100 档调整,缺档时跳到下一个可用字重。本机字体名、字体文件,或者只给这个字重换的字体,点那一格,或者用这一行末尾的「⋯」菜单里的「换字体…」,在「选择字体」里指定。Google Fonts 的静态字体只列出它实际有的字重;灰色是推算的值,蓝色是单独设定的,选回灰色那一档就取消单独设定。
各字重的规则没法合并。CSS 变量(var())在 @font-face 里无效,浏览器会直接丢掉这条描述。同一个 font-family 里,如果有的规则写 font-weight: 700、有的写 400 700,实测 Chrome 会把它们分成两组,只用其中一组,合成就失效了。
真正占体积的是汉字字体在 Google Fonts 上的上百个分片。「基础字体:引用 Google Fonts」会用 @import 直接引用 Google 的 CSS,把这个字体排在 font-family 的第二位,自己只写需要覆盖它的字符类别,导出的 CSS 通常只有几 KB。服务器一般会用 gzip 压缩 CSS,导出区显示的 gzip 体积更接近实际传输量。字体文件只按页面用到的字符下载,与 CSS 长度无关。
分档模式下,在字体选择器里提交修改或改变跟随关系时,会检查各行实际使用的字体和粗细,自动取消明确超出已知字重范围的导出勾选。网页和字体文件的选择分别检查;有效的单独映射、范围内的静态缺档,以及范围未知的字体都会保留。取消勾选不删除该行的调整,可重新勾选;换字体和自动取消可一起撤销。若某组已选字重全部越界,则保留原勾选并提示手动确认。换成范围更大的字体不会自动勾回字重;连续模式的选择与范围不自动调整。
斜体
没有斜体规则时,<em> 和 <i> 里的字全部由浏览器模拟倾斜:西文明明有斜体也不用,汉字也会歪掉。所以默认导出斜体,每组规则另有一份 font-style: italic:西文用真正的斜体(Google Fonts 的 Italic、上传的斜体文件、本机的「… Italic」,或者可变字体的 slnt / ital 轴);没有斜体的字符类别用正体文件、也声明成 italic,浏览器就不会去模拟。基础字体用 @import 引用时,Google 那边只有正体,所以使用规则里加了 font-synthesis-style: none,让它同样保持正体。
可变轴
「选择字体…」里可以调可变字体的其他轴,例如宽度、笔画粗细(GRAD)、光学尺寸。Google Fonts 只保留请求里写了的轴,其余固定在默认值、从文件里去掉,所以调过的轴会加进请求,文件大约变成两倍。固定的值写在 @font-face 的 font-variation-settings 里,Safari 不认这一行,会按默认值显示。光学尺寸选「跟随字号」时,浏览器按实际字号设定 opsz;实测 Chrome 用的是 size-adjust 放大之后的字号,正好对应西文实际显示的大小。
「字体」页签「字体特性」里的「数字样式」「斜线零」对应 font-variant-numeric,写在使用规则里(Chrome 52+、Firefox 34+、Safari 9.1+),页面上还可以按元素改,比如只让表格用等宽数字。效果取决于显示数字的那个字体有没有这些 OpenType 特性:工具会检测它默认是哪种数字,选了它没有的样式时会提示。Google Fonts 的网页字体删掉了大部分特性,没有旧式数字和斜线零。
行高度量:合成字体的行高(line-height: normal)和基线在行里的位置,浏览器取自负责空格的那条规则,也就是半角西文的字体,而且是 size-adjust 放大之后的。导出时默认给基础字体以外的规则写上汉字字体的 ascent-override、descent-override、line-gap-override;size-adjust 会把它们再放大一次,所以写的是除过之后的值。这样排出来和纯汉字字体一样。Chrome 87+、Firefox 89+ 支持,Safari 会忽略。
繁体中文:台湾和香港
「适用语言」的繁体中文分成台湾和香港两种。导出时用 :is(:lang(…)) 把常见写法都包进去:台湾版匹配 zh-Hant、zh-TW,香港版匹配 zh-HK、zh-Hant-HK 和澳门的写法。原因是 :lang(zh-Hant) 匹配不到 lang="zh-TW":浏览器不会从地区推出文字。简体中文同样会加上 zh-CN、zh-SG。
两地的写法和大陆不同:标点在字身正中(大陆、日本靠左下),字形也按各自的标准。工具会量全角标点的位置,并按字族名判断字形的地区:和校样的语言不一致时在字符类别表里提示,和适用语言不一致时在导出区提示。思源、Noto CJK 这类一个文件含多个地区字形的字体会按 lang 切换,所以测量时也带上语言。
字符类别表里有一行「注音符号」,也负责声调号 ˊ ˇ ˋ ˙:它们原本属于西文的码位,不归过来就会用西文字体显示。法语等的重音字母(é、à)是另外的码位,不受影响;需要的话可以在齿轮里把声调号改回半角西文。
App 代码(实验性)
iOS、Android 和 Flutter 没有复合字体。导出里的「App 代码」生成一段 Swift、Kotlin 或 Dart:按字符类别把文字切成片段,每段分别设字体、大小和基线偏移,字符范围和网页导出完全相同。代码里的字体名称(PostScript 名、文件名、family)是推测的,要对照 App 里实际打包的字体改;混用不同大小的字会让行高变化,没有网页那样的行高修正;Flutter 不能单独移动基线。三种代码都编译过(Kotlin 对着 Android API,Flutter 通过 analyze 和 test),切分结果也核对过,但没有在真机上看过排版效果,发现问题欢迎在 GitHub 提交 PR 或 Issue。字体授权允许的话,把生成的字体文件打包进 App 效果最完整。
字体文件
「字体文件」页签把合成字体做成真正的字体(TTF、WOFF2、OTF,可任选),给 Figma、Keynote、Word 这类不支持合成字体的软件用。做法和导出的 CSS 一一对应:每条规则的字体只取它负责的字,按大小缩放、按基线上下平移,再合并成一个字体;行高度量用汉字基础字体的。生成在浏览器里进行(Pyodide + fontTools),字体不会上传到任何服务器。
源字体:Google Fonts 的字体从 google/fonts 仓库下载完整文件,网页接口给的切片去掉了大部分 OpenType 特性;上传的字体直接使用;本机安装的字体通过浏览器的本机字体接口读取(Chrome、Edge,需要授权)。CFF 轮廓的 OTF 会转换成 TrueType 曲线(误差不超过 1/1000 em),字体集合(TTC)只取用到的那一款。只有 OFL、Apache 等允许修改的许可可以直接合并,许可不明的字体(包括系统自带和商用的字体)要先确认有权修改,生成的文件只给自己用。字体微调(hinting)会去掉,只影响 Windows 上的小字号。浏览器会在中西文之间自动加 1/8 em 的间距,其他软件不会。
格式:合并只能在 TrueType 曲线上做,所以 OTF 是最后从合并结果转换成 CFF 曲线得到的。浏览器里能跑的字体库(fontTools)不能合并中日文 OTF 常用的 CID 结构 CFF,也不能把 TrueType 和 CFF 曲线放进同一个字体;能直接合并 CFF、生成 CID 结构 OTF 的 Adobe AFDKO 是 C 程序,不能在浏览器里运行。所以源字体是 CFF 时,会经过「三次曲线 → 二次曲线 → 三次曲线」的转换(误差不超过 1/1000 em,印刷上看不出),生成的 OTF 也不是 CID 结构。现在的软件都能正常使用,个别要求 CID 字体的老印刷流程可能不接受。
为什么不用 font-size-adjust
font-size-adjust(Chrome 127、Firefox 92、Safari 17 支持双值语法)也能统一字号,但它对元素里的每个字体都生效:把西文调到目标大写高的同时,汉字字体也会按它自带的西文度量被缩放。它也不能按字符类别分配字体,解决不了引号归属。更关键的是,MDN 指出它和 @font-face 的 size-adjust 同时出现时,size-adjust 不再起作用。所以使用复合字体的元素上不要再写 font-size-adjust。校样的「对照其他做法」里可以切换到这个做法比较效果。
CSS 原生 CJK 排版属性
这些属性和复合字体互不冲突,可以叠加使用。「排版」里的设定会写进导出的使用规则;对齐、对齐方式、段落换行属于页面版式,在校样的「显示」菜单里,只用于预览,不导出。下表是 2026 年 10 月 MDN 兼容性数据里各浏览器开始支持的版本。
| 属性 | 作用 | Chrome / Edge | Firefox | Safari |
| text-autospace | 汉字、假名与西文、数字之间自动加 1/8 em。Chrome 只支持 normal / no-autospace,实测初始值是 no-autospace(规范写的是 normal),需要显式写出。 | 140 | 145 | 18.4 |
| text-spacing-trim | 全角标点挤压:相邻标点合并、行首开括号半角化。目前只实现了 normal / space-all / space-first / trim-start。 | 123 | — | — |
| word-break: auto-phrase | 按词组(文節)换行,避免把一个词拆在两行。只对 lang="ja" 和 lang="ko" 生效。 | 119 | — | 预览版 |
| line-break | 禁则强度:strict 更严格地禁止行首出现小假名、长音符等。 | 58 | 69 | 11 |
| text-wrap: pretty | 避免段落末行只剩一两个字。Chrome 只调整段落最后四行;Safari 会重排整段、把每行排短,并让标点悬挂失效。 | 117 | — | 26 |
| text-wrap: balance | 让各行长度接近,适合标题。 | 114 | 121 | 17.5 |
| text-justify | 两端对齐的方式:inter-character 在字间分配空隙。 | 145 | 55 | — |
| hanging-punctuation | 标点悬挂到版心外。Safari 里 text-wrap 为 pretty 时不悬挂。 | — | — | 10 |
| text-box | 裁掉首行上方、末行下方的半行距。ideographic 边缘目前只有 Firefox 支持。 | 133 | 154 | 18.2 |
| text-combine-upright: all | 竖排中的纵中横,需要把数字包进单独的元素。digits 值没有浏览器实现。 | 48 | 48 | 15.4 |
来源:MDN text-autospace、text-spacing-trim、font-size-adjust、MDN browser-compat-data、Chrome:CSS 国际化新特性。
比對規則
同一個 font-family 下可以寫多條 @font-face。瀏覽器為每個字元從最後一條往前找,選第一條 unicode-range 包含它、且字型裡真有這個字形的規則。所以基礎字型(漢字)寫在最前,不限範圍,負責其餘所有字元;半形西文、半形數字等字元類別寫在後面接管各自的範圍;例外字元寫在最後,優先順序最高。
字元類別列保留名稱與必要狀態;各字元類別涵蓋的字元可在「字元類別」說明與分組設定中查看;半形數字僅含 0–9,全形數字屬於全形符號。預設卡片名稱描述字型搭配,簡繁與地區由標籤區分。頂端列「分享」左側的齒輪開啟「設定」,校樣的「顯示」選單控制預覽。
字型名前的灰色閃爍點表示正在載入,紅點表示載入失敗;將滑鼠移到狀態點上或以鍵盤聚焦,可查看說明與具體失敗原因。狀態對應目前校樣實際使用的字型;連續模式讀取整條可變字重軸的載入結果。載入完成後隱藏狀態點,跟隨其他字元類別的字型不另外顯示狀態點。
預設集與儲存
清單第一張「目前設定」卡片顯示正在編輯的搭配,不受篩選影響。「另存預設集」會依目前主要字型組合填入可修改的名稱,重名時自動加上編號,可直接儲存副本。尚未命名時,卡片也顯示相同的建議名稱;已有名稱則保留。編輯自己的預設集時,「儲存變更」會在有變更時啟用,再次點選確認後更新原預設集。另存時會建立副本;輸入已有名稱時會提示,並須再次確認覆寫。
預設集只儲存在目前瀏覽器,不包含字型檔案。篩選只套用至後面的預設集清單;沒有符合項目時仍可儲存目前設定。切換預設集前會提醒儲存尚未儲存的變更。儲存失敗時保留編輯內容與已有預設集。
外觀與校樣顏色
頂欄齒輪裡的「外觀」可選擇淺色、深色或跟隨系統,並在跟隨系統時隨系統配色更新。校樣工具列的「顯示」選單可用色盤或十六進位色碼自訂背景色與文字顏色,即時套用到校樣與度量圖;編輯區與工具列維持主題配色。離開色碼欄位時,無效輸入會恢復成上一次有效顏色。「恢復預設顏色」會清除自訂顏色,恢復目前主題的預設顏色。顏色可分別設定,切換主題時會保留自訂值。 設定與顯示選單依功能分組,標籤、控制項與說明使用一致的對齊與間距。
這些是目前瀏覽器的外觀偏好,重新整理、切換預設集、復原或匯入分享後都會保留,不隨預設集儲存或分享,也不影響匯出的 CSS、應用程式碼與字型檔案。
分享設定
頂端列「匯出」左側的外框「分享」按鈕會複製目前設定的連結,無須先存為預設。連結保留分享當下的字型、大小、字重、基線、可變軸、字元分組、例外字元、排版與匯出設定;後續編輯不會改變已傳送的連結。
連結不包含字型檔案、自訂校樣內文、歷程紀錄或其他已存預設。接收方會看到內建校樣,可以繼續編輯或另存預設,也可復原導入以恢復原設定。Google Fonts 會重新載入;本機字型需由接收方安裝,上傳字型需重新提供檔案,缺少時會在字型頁提示。設定直接儲存在連結片段中,無須伺服器儲存;連結過長時會提示,剪貼簿無法使用時可手動複製。
大小:size-adjust
size-adjust 按百分比縮放一個字型的字形和度量。Chrome/Edge 92+、Firefox 92+、Safari 17+ 支援。它也會放大這個字型的上伸、下伸度量,line-height: normal 時行距可能不均勻,建議寫固定的 line-height。
「基礎設定」裡的大小與基線,以及「各字重」裡的大小,都可直接輸入數值,或使用輸入框右側的上下箭頭每次增減 0.5。鍵盤按住 Shift 再按 ↑↓ 時,每次增減 5。清空輸入框可恢復繼承值。箭頭在滑鼠停留或聚焦時出現,觸控螢幕上持續顯示;顯示與隱藏不會改變數字的對齊位置。
基線偏移需要 JS
@font-face 沒有基線描述子。同一行裡所有字形都對齊在字母基線上,CSS 無法按字型單獨移動。工具裡的「基線」會在匯出時附帶一段 JS,把對應字元包進 <span> 用相對定位移動,不影響行高。想要純 CSS,就把所有基線保持為 0。
自動調整
「基礎設定」右上角的「自動調整」會依字元類別調整獨立指定的字型,漢字基礎字型維持不變。跟隨項目繼承來源字元類別的結果,已個別設定的大小與基線保留。所有需要調整的字型與參照相同時,提示無須調整,不改現有設定。結果可微調,整次操作可一次復原。操作提示從螢幕底部滑入,停留後淡出;系統開啟「減少動態效果」時直接顯示。
參照。西文以漢字字型內建的西文為參照,兼顧大寫字母與小寫 x 的高度,缺少字母時按漢字字面估算;獨立數字對照本次調整後的西文數字。假名、全形標點、符號、注音及獨立的中西共用標點,對照漢字字型中的同類字元。假名、數字、注音比較對應字元的高度;全形標點、符號與共用標點依對應字元的字身寬度調整大小,再對齊字形位置,保留標點的小字面與地區位置,不將所有字元放大至漢字高度。
例外字元。僅自動調整原屬同一字元類別、最多 64 個字元的獨立例外群組,以原字元類別目前字型中的相同字元為參照。混合字元類別、未分類字元、範圍過大或缺少可靠對應字形時,保留原設定並提示。任一待測字重缺少參照時,保留該字元類別的全部設定,避免基礎設定的變動間接影響無法測量的字重。
字重與基線。分段模式在調整後的大小比較同類字元的筆畫粗細,選擇較接近的可用字重,並避免同一字型的粗體比正文更細。西文使用 H、h 的主幹,其他字元類別使用多個對應字元的橫縱截面估算,僅作為視覺調整的起點。支援 Google Fonts 與有字重軸的本機/上傳字型;連續模式、單一字重或無法測量可靠筆畫時保留粗細。依勾選的匯出字重測量,並一律測量 400:400 寫入基礎設定,其他字重的大小與基礎相差至少 0.5 個百分點時個別儲存。基線只儲存基礎值,小於 2% em 的偏移設為 0;網頁偏移需要 JS,字型檔案直接寫入位置。舊版瀏覽器仍可自動比對字重;若無法測量所選的其他可變軸,該字元類別保留原設定並提示。
個別重設與限制。「各字重」字元類別標題旁的重設按鈕會恢復該字元類別的基礎大小 100%、基線 0 與最接近標準 400 的可用字重,並清除各字重的大小、粗細與獨立字型設定。保留基礎字型選擇、其他可變軸、其他字元類別、共用字型名稱對應、匯出勾選與預覽字重,並可復原。自動調整無法建立缺少的字重,也不會改變匯出勾選。字形風格、襯線對比與設計比例仍需在正文中判斷,必要時手動微調或更換字型。
選擇字型
字型資料庫納入隨頁面提供的官方中繼資料中,所有標示支援簡體中文、繁體中文、香港中文或日文的 Google Fonts 字型家族,並保留原有常用西文及韓文字型家族。更新中繼資料時同步更新目錄,不在每次開啟時即時擷取 Google 全站。清單僅載入可見項目的字樣,選取後再載入詳細預覽,無須先下載全部字型。 排序位於清單上方、候選數量右側,以無框線按鈕顯示目前方式;篩選列僅保留篩選條件。 「字型資料庫」合併 Google Fonts 與瀏覽器讀取到的本機字型,標示來源,同名字型可分別選用。已知的原文名稱顯示於英文名稱後,搜尋別名明確標示;無可靠資料時保留原名。可搜尋名稱、別名、本機完整名稱或 PostScript 名稱,忽略大小寫、全半形、空格、連字號與底線。預設依名稱 A–Z 排序,可切換已知字重範圍由廣到窄,未知範圍置後。稍後找到的字型加在清單末尾;背景檢查不移動既有候選,主動切換排序時重新排列。切換保留搜尋、篩選及預覽字型。 清單字樣優先展示字型的主要文字:日文混排漢字、平假名與片假名,簡繁中文、韓文和西文各用對應文字。Google Fonts 優先採用官方主要文字資料,本機已知名稱作補充;語言未知時保留字元類別字樣。右側預覽仍依正在編輯的字元類別顯示。少量字重簡寫為 400/700。
清單與預覽以分隔線區分,桌面為直線、窄螢幕為橫線。來源和字重資訊位於清單項目右上;窄清單會換到名稱下方並靠右。一至兩段直接列出字重,更多段位顯示數量及範圍。本機檔案未讀取時只顯示已發現的字重,不推斷連續或分段。 「含義大利體」篩選要求字型提供 Italic 款式或 ital 軸,不將 Oblique、單獨的 slnt 軸或瀏覽器模擬傾斜計入;未知資料保留,不掃描全部字型檔案。此篩選不改變匯出設定。 頁尾的「套用後自動調整以搭配漢字」預設勾選,僅在確認使用字型後執行;取消對話框不會套用。 涵蓋範圍篩選聚焦於簡體漢字、繁體漢字、日文漢字、假名、全形標點、全形符號及注音;西文字母、數字與中西共用標點的缺字仍於選取字型後的校樣檢查中提示。 「字重類型」包含連續(VF)、分段及「支援粗體」。類型組內任選;粗體支援為附加條件,須同時符合。風格包含黑體、宋/明體、仿宋體、楷體、圓體、教科書體、手寫與書法;採已知設計及明確名稱規則,支援多標籤,不改變合成設定。漢字細分為簡體、繁體及日文漢字,可同時選取,與字型詳細資訊使用相同代表字;代表字元涵蓋範圍,不代表當地字形標準。須確認涵蓋全部所選代表字元;未檢查字型可清除篩選後查看。Google Fonts 使用隨頁面提供的 CSS 範圍,本機字型重複使用預設款式已完成的檢查;不保證完整字庫皆無缺字。新結果於下次搜尋或篩選時使用,背景檢查不移除候選。清單及預覽共用本機字重資訊:彙整 Regular、Bold 等明確款式,讀取檔案後優先採實際字重及連續軸範圍,直接更新標籤;不掃描全部本機檔案或自動重新排序。 手寫篩選直接採用 Google Fonts 官方的 Handwriting 分類,不再歸入「其他」。Zhi Mang Xing、Long Cang 和 Liu Jian Mao Cao 另依官方說明歸入書法;可同時具備多種風格。仿宋、楷體、書法等細分含名稱推斷,選單內標明僅供參考;未知資料仍保留。 缺字於選字樣張內以波浪線標示。基礎設定只選擇字型,粗細在「各字重」中調整。樣張工具列的字重與字級僅用於預覽。從某一字重列進入選字時,可直接指定該段使用的字型字重,也可選擇替換該字元類別的全部字重。可變軸直接顯示於右側頁尾,對此字元類別的所有字重生效;點擊「使用這個字型」後儲存,關閉或取消不儲存。
第一次開啟字型資料庫時會自動嘗試讀取本機字型,需要通過瀏覽器的字型存取授權;瀏覽器也可能要求由本次點擊觸發讀取。本頁讀取成功後會重複使用結果,僅在失敗時顯示重試;不支援介面的瀏覽器可直接在搜尋框輸入完整名稱。讀取結果依字族與款式分組,選取時再讀取可變軸。右側所選字型下方的「字型款式」用於選擇 Regular、Bold、Italic 等實際款式,只有多個款式時才顯示。名稱無法透過 CSS local() 載入時,嘗試使用已授權字型的資料預覽;CSS 匯出仍使用字型名稱。字樣載入、字元檢查與缺字分別提示;字樣失敗不表示字型未安裝。篩選優先使用已知資料,以及名稱中明確的風格、粗體資訊,不會因尚未讀取檔案就判定不支援粗體。未驗證的完整名稱仍可嘗試選用,載入失敗會明確提示。字型清單與存取到的資料只留在目前頁面工作階段。 背景字形與字重資料更新時,保留正在編輯的表格輸入,避免重繪打斷輸入。
字型檔案可拖入或選取,匯入後保留於本頁清單,可搜尋並用於其他字元類別或字重;重複的相同檔案不會新增項目。能讀取名稱表時顯示正式字族與樣式,否則顯示檔案名稱。無效檔案不會覆蓋目前選擇。清單與檔案只保留於目前頁面,重新載入後須再次提供;預設集與分享不包含檔案。
基礎設定只選擇字型,粗細在「各字重」中調整。樣張工具列的字重與字級僅用於預覽。從某一字重列進入選字時,可直接指定該段使用的字型字重,也可選擇替換該字元類別的全部字重。可變軸直接顯示於右側頁尾,對此字元類別的所有字重生效;點擊「使用這個字型」後儲存,關閉或取消不儲存。
樣張初始文字依正在編輯的字元類別與校樣語言產生,可直接輸入、換行或貼上;切換候選及「預覽/資訊」保留草稿。缺字僅依目前樣張檢查,以與首頁相同的波浪線標示;停留可查看缺字與系統補字的說明,不再統計主校樣的缺字。無法完成檢查時,只在資訊頁說明無法確認。工具列將 B 字重控制項與字級放在一起:點擊 B 或數字展開滑桿,也可輸入、按方向鍵或拖曳圖示。連續字型支援範圍內的數值及 400/700 快捷刻度,分段字型只選實際段位,單段字型維持該段。字重與字級僅用於預覽;基礎設定的粗細在「各字重」中調整。輸入框隨內容、字型、字級及欄寬自動增高;標示不改寫輸入值,不影響游標與輸入法。重新開啟恢復字元類別樣張,編輯不進入預設、分享或匯出。 校樣正文可直接點擊編輯。首次修改內建範例時自動新增並選取一份自訂文字,繼續輸入只修改同一份;內建範例維持原樣。自訂文字可切換、刪除並儲存於此瀏覽器,新增按鈕可複製目前文字。支援換行、純文字貼上、輸入法及文字復原/重做;文字不會進入字型設定、分享連結或匯出內容。字型清單以電腦和 Google 圖示表示本機與 Google Fonts 來源,游標停留時顯示來源及字重詳細資料。
選擇非漢字字元類別時,預設勾選「自動調整以搭配漢字」。確認使用後,僅依該字元類別的參照規則調整選取的字元類別;數字參照西文,其他字元類別保留各自用途與比例。取消勾選可保留原調整。單一字重僅調整該檔的大小與可調粗細,不更動字元類別共用基線。完成量測後一次套用,取消不儲存;缺少可靠參照時僅選用字型並提示保留調整。字型與調整可一併復原。
桌面左右等寬,分隔線置中,兩側各自捲動。對話框頂部為「本機字型庫 + Google Fonts/字型檔案」頁籤,下方採寬版工作區:左側以較大的字樣瀏覽候選,右側以分隔線區分並呈現所選字型的預覽與設定,兩側各自捲動,不加入欄位標題。搜尋欄下方直接顯示「來源/風格/字重/字元集」篩選列,已選條件保持可見;來源與風格皆可複選,同一組內符合任一項即可,不同組須同時符合;未勾選代表不限該組。清除篩選會保留搜尋文字,窄螢幕自動換行。對話框上下僅保留小邊距,底部操作始終可見。搜尋與完整名稱輸入共用同一欄:沒有結果時,依允許的來源提供明確的嘗試操作;輸入未完成時不會載入候選。缺字於樣張內標示,檢查失敗收在資訊頁。清單無外框,以列間分隔線區分候選,底部與工作區對齊。右側以「預覽/資訊」切換樣張與來源、字重、主要文字及涵蓋詳情;資訊不再列西文字母、數字、韓文徽章及缺字圖例。確認與取消固定於右欄底部,自動調整位於按鈕上方。窄螢幕上下排列,在同一工作區捲動,底部操作保持可見。 字型庫未選字型時右側顯示空白狀態;檔案清單為空時隱藏右側,拖放區佔滿整個工作區,說明位於區內。匯入後恢復左右配置,拖放入口收緊。可變軸位於右側頁尾的確認按鈕上方,桌面長軸清單獨立捲動;窄螢幕軸設定隨工作區捲動,確認按鈕保持可見。支援可變軸的字型以「使用此設定」確認,其他字型以「使用這個字型」確認。
資訊頁依名稱、字型特徵、作者與授權統一排列,可顯示中文、英文及字型內提供的日文等其他語言顯示名稱、家族、樣式、PostScript 名稱、來源、字重、目前來源的家族樣式數、Unicode 字元數量、等寬與可變類型、目前檔案大小,以及字型內的設計師、發行者、授權說明與網址。字元數量依映射至非零字形的 Unicode 字元統計,並非字形總數。僅於查看資訊時讀取所選本機檔案;匯入檔案重複使用既有資料,不掃描整個本機字型庫。TTF、OTF 與 WOFF 可讀取完整資料表;WOFF2 及 Google Fonts 網頁來源缺少完整資料時標為「目前來源未提供」,已讀取但字型未填寫的欄位標為「字型未提供」。搜尋別名不視為字型內名稱,不以字形數代替字元數,也不推估授權。代表字元檢測不代表完整語言支援;中繼資料僅保留於本頁,不進入設定、分享或匯出。拖放區的檔案格式與本機讀取說明合為一個緊湊文字群組,與選擇按鈕間隔 24px;匯入後入口收緊。 桌面上的字型名稱、樣式及「預覽/資訊」頁籤固定,僅頁籤下方內容捲動;窄螢幕仍使用工作區統一捲動,詳細資料標題與頁籤在其範圍內置頂。代表字元檢測改用與其他資料相同的兩欄欄位,顯示每組支援數與檢測總數;斜體資訊歸入字型特徵。本機字型可透過預覽字重切換同一家族、相同傾斜與寬度樣式中已安裝的實際字重檔案,依已知段位選擇,Plain 與 Regular 皆視為一般體;可變字型仍使用連續範圍。不模擬粗體,不掃描未選取的字型二進位資料,也不推估未知字重。預覽不改變選取的基礎樣式與設定。家族只有粗細差異時不再重複顯示樣式選單,另有斜體或寬窄等差異時保留。搭配斜體檔案的入口位於設定頁尾,說明用途為匯出斜體,不影響目前的直立字型預覽;僅於西文、數字、共用標點或自訂字元類別等適用選擇顯示,已搭配的檔案可繼續替換。匯入失敗保留原搭配,關閉或取消不套用。 字型內提供的其他語言顯示名稱逐項列出;資料限制、風格推估、代表字元檢測與授權說明合併於資訊頁頂端。選字視窗不再顯示標點位置標籤及名稱解釋。
搜尋僅篩選清單並顯示候選數量;沒有結果不表示載入失敗。清單外的完整名稱需明確嘗試,手動輸入時不會檢查尚未輸入完畢的名稱。取得字型、載入字樣、等待本機授權與失敗分別顯示狀態;字樣等待超過 12 秒會提示並提供重試,較晚完成的結果不會覆蓋新的選擇。失敗時保留候選與設定;未確認的本機字型仍可選用。字元檢查失敗會顯示未知,不視為全部支援。
本機字型:local()
local() 按字型的完整名或 PostScript 名比對,而不是字族名。例如寫 Hiragino Sans GB W3 或 HiraginoSansGB-W3,而不是 Hiragino Sans GB。Safari 只允許網頁使用系統預裝字型,自己安裝的字型在 Safari 裡不生效。訪客電腦上沒有這個字型時,會改用前面一條規則。
Google Fonts
中日韓字型在 Google Fonts 上被切成上百個分片,每片有自己的 unicode-range。匯出時工具會把分片範圍和字元類別範圍求交集,只保留需要的分片,所以西文字元類別通常只剩一兩條。url 指向 fonts.gstatic.com,正式專案建議下載後自行託管。
匯出多個字重
字型名下使用「連續字重」「分段字重」說明可用的粗細:連續字重可在範圍內輸入任意值,例如「連續字重 200–900」;分段字重只有固定檔位,例如「分段字重 400、700」,檔位較多時顯示最細到最粗的範圍,滑鼠移到標示上可查看完整檔位。這些標示說明字型本身的能力;匯出模式在「各字重」裡另外選擇。無法確切讀取範圍時不推測,已知具有可變軸但字重範圍不明時標為「字重範圍未知」。跟隨其他字元類別時,請查看來源列的字型資訊。
連續模式下,校樣或網頁設為 font-weight: 450,可變字型就顯示 450,不必只選 400 或 500;超出字型支援範圍時使用最接近的端點,靜態字型使用最接近的一段。可變字型的個別粗細調整暫不生效,切回分段即可恢復。
滑桿統一使用與按鈕一致的黑白配色,水平軌道兩端與滑塊中心及刻度對齊。連續模式在表格左側拖曳兩個滑塊,以 100 為單位選擇匯出範圍。範圍外的列會保留並顯示為灰色,原有調整不會遺失;範圍內仍包含中間字重。精確端點可在「匯出」中輸入。鍵盤方向鍵每次移動 100,搭配 Shift 每次移動 10。拖曳在放開時儲存,可一次復原,Esc 取消這次拖曳。表格只有大小欄時,使用「漢字大小」「半形西文大小」等單列表頭;有靜態字型可調整粗細時,保留字元類別與粗細、大小兩層表頭。
分段模式下,在「各字重」裡勾選要匯出的字重(匯出對話框裡也能選),每個字重各生成一組規則。點選已勾選列的空白處即可預覽該字重,不會改變匯出勾選。點選校樣工具列的 B 圖示或字重欄位可展開滑桿,也可直接輸入數字或拖曳 B 圖示;數字會即時同步。分段模式只預覽已勾選的字重,滑桿顯示對應節點;連續模式在匯出範圍內無段調整,範圍內的 400(Regular)與 700(Bold)刻度可點選跳轉。範圍端點與常用刻度統一顯示在滑桿下方,過近的端點文字會省略。取消目前預覽的字重時,自動切換至最接近的已勾選字重;輸入範圍外或未勾選的值,確認時也會調整至可用範圍。工具裡設定的字型對應 400;其他字重裡,Google Fonts 的字型按同樣的差值換算(例如 500 的字型在 700 時取 800),沒有這個字重就取最接近的;本機字型會按名稱推測粗體(例如 W3 → W6、Regular → Bold),並在這台電腦上檢測。各字型的粗細分布並不一致:「各字重」表格裡可以按字重個別調整各字元類別的大小與粗細。可變字型的粗細可直接輸入任意數值,右側箭頭或鍵盤 ↑↓ 每次增減 10,Shift + ↑↓ 每次增減 100;靜態 Google Fonts 字型按 100 檔調整,缺檔時跳到下一個可用字重。本機字型名、字型檔案,或者只給這個字重換的字型,點那一格,或者用這一列末尾的「⋯」選單裡的「換字型…」,在「選擇字型」裡指定。Google Fonts 的靜態字型只列出它實際有的字重;灰色是推算的值,藍色是單獨設定的,選回灰色那一檔就取消單獨設定。
各字重的規則沒法合併。CSS 變數(var())在 @font-face 裡無效,瀏覽器會直接丟掉這條描述。同一個 font-family 裡,如果有的規則寫 font-weight: 700、有的寫 400 700,實測 Chrome 會把它們分成兩組,只用其中一組,合成就失效了。
真正佔體積的是漢字字型在 Google Fonts 上的上百個分片。「基礎字型:引用 Google Fonts」會用 @import 直接引用 Google 的 CSS,把這個字型排在 font-family 的第二位,自己只寫需要覆蓋它的字元類別,匯出的 CSS 通常只有幾 KB。伺服器一般會用 gzip 壓縮 CSS,匯出區顯示的 gzip 體積更接近實際傳輸量。字型檔案只按頁面用到的字元下載,與 CSS 長度無關。
分檔模式下,在字型選擇器裡套用修改或改變跟隨關係時,會檢查各列實際使用的字型與粗細,自動取消明確超出已知字重範圍的匯出勾選。網頁與字型檔案的選擇分別檢查;有效的個別對應、範圍內的靜態字重缺檔,以及範圍未知的字型都會保留。取消勾選不會刪除該列的調整,可重新勾選;更換字型與自動取消可一起復原。若某組已選字重全部超出範圍,則保留原勾選並提示手動確認。換成範圍更大的字型不會自動勾回字重;連續模式的選擇與範圍不自動調整。
斜體
沒有斜體規則時,<em> 和 <i> 裡的字全部由瀏覽器模擬傾斜:西文明明有斜體也不用,漢字也會歪掉。所以預設匯出斜體,每組規則另有一份 font-style: italic:西文用真正的斜體(Google Fonts 的 Italic、上傳的斜體檔案、本機的「… Italic」,或者可變字型的 slnt / ital 軸);沒有斜體的字元類別用一般(非斜體)的檔案、也宣告成 italic,瀏覽器就不會去模擬。基礎字型用 @import 引用時,Google 那邊只有一般字形,所以使用規則裡加了 font-synthesis-style: none,讓它同樣保持直立。
可變軸
「選擇字型…」裡可以調可變字型的其他軸,例如寬度、筆畫粗細(GRAD)、光學尺寸。Google Fonts 只保留請求裡寫了的軸,其餘固定在預設值、從檔案裡去掉,所以調過的軸會加進請求,檔案大約變成兩倍。固定的值寫在 @font-face 的 font-variation-settings 裡,Safari 不認這一行,會按預設值顯示。光學尺寸選「跟隨字號」時,瀏覽器按實際字號設定 opsz;實測 Chrome 用的是 size-adjust 放大之後的字號,正好對應西文實際顯示的大小。
「字型」頁籤「字型特性」裡的「數字樣式」「斜線零」對應 font-variant-numeric,寫在使用規則裡(Chrome 52+、Firefox 34+、Safari 9.1+),頁面上還可以按元素改,比如只讓表格用等寬數字。效果取決於顯示數字的那個字型有沒有這些 OpenType 特性:工具會檢測它預設是哪種數字,選了它沒有的樣式時會提示。Google Fonts 的網頁字型刪掉了大部分特性,沒有舊式數字和斜線零。
行高度量:複合字型的行高(line-height: normal)和基線在行裡的位置,瀏覽器取自負責空格的那條規則,也就是半形西文的字型,而且是 size-adjust 放大之後的。匯出時預設給基礎字型以外的規則寫上漢字字型的 ascent-override、descent-override、line-gap-override;size-adjust 會把它們再放大一次,所以寫的是除過之後的值。這樣排出來和純漢字字型一樣。Chrome 87+、Firefox 89+ 支援,Safari 會忽略。
繁體中文:台灣和香港
「適用語言」的繁體中文分成台灣和香港兩種。匯出時用 :is(:lang(…)) 把常見寫法都包進去:台灣版比對 zh-Hant、zh-TW,香港版比對 zh-HK、zh-Hant-HK 和澳門的寫法。原因是 :lang(zh-Hant) 比對不到 lang="zh-TW":瀏覽器不會從地區推出文字。簡體中文同樣會加上 zh-CN、zh-SG。
兩地的寫法和中國大陸不同:標點居中(大陸、日本靠左下),字形也依各自的標準。工具會量全形標點的位置,並依字族名判斷字形的地區:和校樣的語言不一致時在字元類別表裡提示,和適用語言不一致時在匯出區提示。思源、Noto CJK 這類一個檔案含多個地區字形的字型會依 lang 切換,所以測量時也帶上語言。
字元類別表裡有一行「注音符號」,也負責聲調號 ˊ ˇ ˋ ˙:它們原本屬於西文的碼位,不歸過來就會用西文字型顯示。法語等的重音字母(é、à)是另外的碼位,不受影響;需要的話可以在齒輪裡把聲調號改回半形西文。
App 程式碼(實驗性)
iOS、Android 和 Flutter 沒有複合字型。匯出裡的「App 程式碼」產生一段 Swift、Kotlin 或 Dart:按字元類別把文字切成片段,每段分別設字型、大小和基線偏移,字元範圍和網頁匯出完全相同。程式碼裡的字型名稱(PostScript 名、檔名、family)是推測的,要對照 App 裡實際打包的字型改;混用不同大小的字會讓行高變化,沒有網頁那樣的行高修正;Flutter 不能單獨移動基線。三種程式碼都編譯過(Kotlin 對著 Android API,Flutter 通過 analyze 和 test),切分結果也核對過,但沒有在實機上看過排版效果,發現問題歡迎在 GitHub 提交 PR 或 Issue。字型授權允許的話,把產生的字型檔案打包進 App 效果最完整。
字型檔案
「字型檔案」頁籤把複合字型做成真正的字型(TTF、WOFF2、OTF,可任選),給 Figma、Keynote、Word 這類不支援複合字型的軟體用。做法和匯出的 CSS 一一對應:每條規則的字型只取它負責的字,按大小縮放、按基線上下平移,再合併成一個字型;行高度量用漢字基礎字型的。產生在瀏覽器裡進行(Pyodide + fontTools),字型不會上傳到任何伺服器。
來源字型:Google Fonts 的字型從 google/fonts 倉庫下載完整檔案,網頁介面給的切片去掉了大部分 OpenType 特性;上傳的字型直接使用;本機安裝的字型透過瀏覽器的本機字型介面讀取(Chrome、Edge,需要授權)。CFF 輪廓的 OTF 會轉換成 TrueType 曲線(誤差不超過 1/1000 em),字型集合(TTC)只取用到的那一款。只有 OFL、Apache 等允許修改的授權可以直接合併,授權不明的字型(包括系統內建和商用的字型)要先確認有權修改,產生的檔案只給自己用。字型微調(hinting)會去掉,只影響 Windows 上的小字號。瀏覽器會在中西文之間自動加 1/8 em 的間距,其他軟體不會。
格式:合併只能在 TrueType 曲線上做,所以 OTF 是最後從合併結果轉換成 CFF 曲線得到的。瀏覽器裡能跑的字型函式庫(fontTools)不能合併中日文 OTF 常用的 CID 結構 CFF,也不能把 TrueType 和 CFF 曲線放進同一個字型;能直接合併 CFF、產生 CID 結構 OTF 的 Adobe AFDKO 是 C 程式,不能在瀏覽器裡執行。所以來源字型是 CFF 時,會經過「三次曲線 → 二次曲線 → 三次曲線」的轉換(誤差不超過 1/1000 em,印刷上看不出),產生的 OTF 也不是 CID 結構。現在的軟體都能正常使用,個別要求 CID 字型的舊印刷流程可能不接受。
為什麼不用 font-size-adjust
font-size-adjust(Chrome 127、Firefox 92、Safari 17 支援雙值語法)也能統一字號,但它對元素裡的每個字型都生效:把西文調到目標大寫高的同時,漢字字型也會按它自帶的西文度量被縮放。它也不能按字元類別分配字型,解決不了引號歸屬。更關鍵的是,MDN 指出它和 @font-face 的 size-adjust 同時出現時,size-adjust 不再起作用。所以使用複合字型的元素上不要再寫 font-size-adjust。校樣的「對照其他做法」裡可以切換到這個做法比較效果。
CSS 原生 CJK 排版屬性
這些屬性和複合字型互不衝突,可以疊加使用。「排版」裡的設定會寫進匯出的使用規則;對齊、對齊方式、段落換行屬於頁面版式,在校樣的「顯示」選單裡,只用於預覽,不匯出。下表是 2026 年 10 月 MDN 相容性資料裡各瀏覽器開始支援的版本。
| 屬性 | 作用 | Chrome / Edge | Firefox | Safari |
| text-autospace | 漢字、假名與西文、數字之間自動加 1/8 em。Chrome 只支援 normal / no-autospace,實測初始值是 no-autospace(規範寫的是 normal),需要顯式寫出。 | 140 | 145 | 18.4 |
| text-spacing-trim | 全形標點擠壓:相鄰標點合併、行首開括號半形化。目前只實作了 normal / space-all / space-first / trim-start。 | 123 | — | — |
| word-break: auto-phrase | 按詞組(文節)換行,避免把一個詞拆在兩行。只對 lang="ja" 和 lang="ko" 生效。 | 119 | — | 預覽版 |
| line-break | 禁則強度:strict 更嚴格地禁止行首出現小假名、長音符等。 | 58 | 69 | 11 |
| text-wrap: pretty | 避免段落末行只剩一兩個字。Chrome 只調整段落最後四行;Safari 會重排整段、把每行排短,並讓標點懸掛失效。 | 117 | — | 26 |
| text-wrap: balance | 讓各行長度接近,適合標題。 | 114 | 121 | 17.5 |
| text-justify | 兩端對齊的方式:inter-character 在字間分配空隙。 | 145 | 55 | — |
| hanging-punctuation | 標點懸掛到版心外。Safari 裡 text-wrap 為 pretty 時不懸掛。 | — | — | 10 |
| text-box | 裁掉首行上方、末行下方的半行距。ideographic 邊緣目前只有 Firefox 支援。 | 133 | 154 | 18.2 |
| text-combine-upright: all | 縱中橫排,需要把數字包進單獨的元素。digits 值沒有瀏覽器實作。 | 48 | 48 | 15.4 |
來源:MDN text-autospace、text-spacing-trim、font-size-adjust、MDN browser-compat-data、Chrome:CSS 國際化新特性。
照合の規則
同じ font-family 名で複数の @font-face を書けます。ブラウザは文字ごとに最後の規則からさかのぼり、unicode-range にその文字を含み、実際にグリフを持つ最初の規則を使います。そのため、ベースフォント(漢字)を最初に範囲指定なしで書いてすべてを受け持たせ、半角欧文や半角数字などの文字クラスを後に書いて担当範囲を引き受けさせます。例外文字は最後に書くので、優先度が最も高くなります。
文字クラスの行には名前と必要な状態を表示します。文字範囲の詳細は「文字クラス」の説明とグループ設定で確認できます。半角数字は 0–9 のみで、全角数字は全角記号に含まれます。プリセット名はフォントの組み合わせを示し、簡体字・繁体字や地域はラベルで区別します。上部の「共有」の左にある歯車から「設定」を開き、校正刷りの「表示」メニューでプレビューを調整します。
フォント名の前で灰色の点が点滅している間は読み込み中、赤い点は読み込み失敗を表します。点にポインターを重ねるかキーボードでフォーカスすると、状態や失敗の理由を確認できます。状態はプレビューで実際に使うフォントを示し、連続モードでは可変ウェイトの範囲全体を読み込んだ結果を使います。読み込みが完了した場合や、ほかの文字クラスと同じフォントを使う場合は点を表示しません。
プリセットと保存
一覧の先頭にある「現在の設定」カードは編集中の組み合わせを表示し、フィルターの対象外です。「新規保存」では現在の主なフォントを組み合わせた名前が自動入力され、そのままコピーを保存できます。名前は変更でき、重複する場合は番号を付けます。名前のない設定ではカードにも同じ候補名を表示し、既存の名前は維持します。自分のプリセットを編集中なら、変更がある場合に「変更を保存」が有効になります。もう一度確認して元のプリセットを更新できます。既存の名前を入力した場合は通知し、再確認後に上書きします。
プリセットはこのブラウザだけに保存され、フォントファイルは含みません。フィルターは後続のプリセットに適用され、一致するものがなくても現在の設定を保存できます。変更が未保存の場合は切り替える前に保存を確認します。保存に失敗しても編集中の内容と既存のプリセットは保持されます。
外観とプレビューの色
上部の歯車にある「外観」でライト・ダーク・システム設定を選べます。システム設定では OS の配色変更に追従します。校正刷りのツールバーの「表示」ではカラーピッカーか16進数カラーで背景色と文字色を指定でき、校正刷りとメトリクス図にすぐ反映されます。編集画面とツールバーはテーマの配色を使います。不正な色の入力は、欄を離れると最後の有効な色に戻ります。「標準の色に戻す」はカスタム色を解除し、現在のテーマの標準色に戻します。色は個別に設定でき、テーマを変えてもカスタム値を維持します。 設定と表示のポップオーバーは機能ごとにまとめ、ラベル、操作部品、説明の位置と間隔を揃えています。
このブラウザの表示設定として保存され、再読み込み・プリセット切り替え・取り消し・共有設定の読み込み後も維持されます。プリセットや共有リンクには含まれず、CSS・アプリコード・フォントファイルの書き出しには影響しません。
設定の共有
上部の「書き出し」の左にある枠線付きの「共有」ボタンで、現在の設定のリンクをコピーします。先にプリセットを保存する必要はありません。リンクには共有時点のフォント、サイズ、ウェイト、ベースライン、可変軸、文字の振り分け、例外文字、組版と書き出しの設定が入り、その後の編集は送信済みのリンクに影響しません。
フォントファイル、独自の校正テキスト、履歴、ほかの保存済みプリセットは含まれません。受信側では標準の校正テキストで表示され、編集やプリセット保存ができ、読み込みを取り消して元の設定に戻すこともできます。Google Fonts は再読み込みされます。ローカルフォントは受信側でインストールし、アップロードフォントはファイルを別途用意してください。不足はフォント画面に表示されます。設定はリンクのフラグメントに入り、サーバーへの保存は不要です。長すぎる場合は通知し、クリップボードが使えない場合は手動でコピーできます。
サイズ:size-adjust
size-adjust はフォントのグリフとメトリクスをパーセントで拡大縮小します。Chrome/Edge 92+、Firefox 92+、Safari 17+ が対応しています。アセンダーとディセンダーも拡大されるため、line-height: normal では行送りが不揃いになることがあります。line-height は固定値で指定するのがおすすめです。
「基本設定」のサイズとベースライン、および「ウェイト別」のサイズは、数値を直接入力するか、入力欄右側の上下の矢印で 0.5 ずつ調整できます。Shift を押しながらキーボードの ↑↓ を押すと 5 ずつ変わります。入力を消すと継承値に戻ります。矢印はホバー時やフォーカス時に表示され、タッチ画面では常に表示されます。表示が切り替わっても数値の位置は変わりません。
ベースラインシフトには JS が必要
@font-face にはベースラインの記述子がありません。同じ行のグリフはすべて欧文ベースラインにそろうため、CSS だけではフォントごとに上下させられません。ツールの「ベースライン」を使うと、書き出し時に小さなスクリプトが付きます。対象の文字を <span> で包んで相対位置で動かすので、行の高さは変わりません。CSS だけで済ませたい場合は、すべてのベースラインを 0 にしてください。
自動調整
「基本設定」の右上にある「自動調整」は、独立して指定したフォントを文字クラスごとに調整します。漢字のベースフォントは変更しません。追従する文字クラスは参照先の結果を継承し、個別に指定したサイズとベースラインは維持します。対象フォントがすべて参照フォントと同じなら、調整不要と通知し、設定は変更しません。結果は微調整でき、操作全体を一度で取り消せます。通知は画面下からスライドして現れ、しばらく表示してから消えます。視差効果の低減が有効な場合は動かさず表示します。
参照。欧文は漢字フォント内蔵の欧文を基準に、大文字と小文字 x の高さを考慮します。参照文字がなければ漢字の字面から推定します。独立した数字は今回調整した欧文の数字に合わせます。かな、全角約物、記号、注音、独立した和欧共通約物は、漢字フォント内の同じ文字を参照します。かな・数字・注音は対応する文字の高さ、全角約物・記号・共通約物は字幅でサイズを合わせてから位置を合わせます。小さい約物の字面や地域ごとの位置を保ち、すべてを漢字の高さには拡大しません。
例外文字。元の文字クラスが一つで、64 文字以内の独立した例外グループだけを自動調整し、元の文字クラスの現在のフォントにある同じ文字を参照します。複数文字クラス、未分類文字、広すぎる範囲、信頼できる参照がない場合は、設定を維持して通知します。測定するウェイトの一つでも参照が不足する場合、その文字クラス全体を維持し、基本設定の変更が未測定のウェイトに影響するのを防ぎます。
ウェイトとベースライン。段階モードでは調整後のサイズで対応する文字の線の太さを比較し、同じフォントの太字が本文より細くならないよう、より近いウェイトを選びます。欧文は H・h の主画、ほかは複数の文字の縦横断面から推定し、視覚調整の出発点とします。Google Fonts とウェイト軸を持つローカル・アップロードフォントに対応します。連続モード、単一ウェイト、信頼できる線幅を測れない場合は太さを維持します。選択した書き出しウェイトと必ず 400 を測り、400 は基本設定、ほかは基本と 0.5 ポイント以上違うサイズだけ個別に保存します。ベースラインは基本値のみを保存し、2% em 未満は 0 にします。Web のシフトには JS が必要で、フォントファイルには位置を直接反映します。古いブラウザーでもウェイトを自動調整できます。指定したほかの可変軸を測定できない場合、その文字クラスの設定を維持して通知します。
個別リセットと制限。「ウェイト別」の文字クラス見出し横のボタンは、その文字クラスの基本サイズを 100%、ベースラインを 0、調整可能なウェイトを通常の 400 に最も近い値に戻し、ウェイト別の個別設定を消去します。ベースフォントの選択、ほかの可変軸と文字クラス、共有のフォント名対応、書き出し選択、プレビューのウェイトは維持し、取り消しもできます。自動調整は不足するウェイトを作らず、書き出し選択も変えません。字形、セリフのコントラスト、設計上の比率は本文で確認し、必要に応じて微調整するかフォントを変えてください。
フォントの選択
同梱の公式メタデータで簡体字・繁体字・香港の中国語・日本語に対応すると分類された Google Fonts の全ファミリーを一覧に含め、従来の欧文・韓国語の候補も残します。メタデータ更新時に一覧も更新し、開くたびに Google 全体を取得することはありません。見える行の見本だけを読み込み、選択後に詳細プレビューを読み込むため、全フォントの事前ダウンロードは不要です。 並び順は一覧の上、候補数の右側に枠線のないボタンで表示し、絞り込みの操作とは分けています。 ライブラリは Google Fonts とローカルフォントをまとめ、取得元を表示します。同名でも別々に選べます。既知の現地語名と検索用の別名を併記します。名前・別名・ローカルの正式名・PostScript 名を検索し、大文字小文字、全半角、空白、ハイフン、アンダースコアを区別しません。初期順は名前 A–Z で、既知のウェイト範囲が広い順にも切り替えられます。範囲不明は末尾に置きます。後から見つかった候補は追加し、背景検査で既存の行を移動しません。明示的な並べ替えは検索、絞り込み、選択中の見本を保持します。 一覧の見本はフォントの主要な文字を優先します。日本語は漢字・ひらがな・カタカナを混ぜ、簡体字・繁体字・韓国語・欧文にはそれぞれの文字を使います。Google Fonts の公式の主要文字情報を優先し、ローカルは既知の名前で補います。不明な場合は文字クラスの見本を使い、右側は編集中の文字クラスに合わせます。少数のウェイトは 400/700 のように表示します。
一覧とプレビューはデスクトップでは縦線、狭い画面では横線で区切ります。取得元とウェイトは各行の右上に表示し、狭い一覧では名前の下へ折り返して右に揃えます。一・二段階は値をそのまま、それ以上は数と範囲を表示します。未読のローカルファイルには確認済みの値だけを表示し、連続・段階式を断定しません。 「イタリックあり」は Italic 書体または ital 軸を条件とし、Oblique、slnt 軸のみ、ブラウザーの擬似傾斜は含めません。不明な候補は残し、全ファイルは走査しません。絞り込みは書き出し設定を変更しません。 フッターの「適用後に漢字に合わせて自動調整」は初期状態でオンです。フォントの使用を確定した後だけ実行し、キャンセル時は適用しません。 収録範囲の絞り込みは簡体字・繁体字・日本語の漢字、仮名、全角約物・記号、注音に絞ります。欧文・数字・共通約物の欠字は、選択後の校正テキスト検査で確認できます。 ウェイトのメニューに連続(VF)、段階式、太字対応をまとめています。タイプはいずれかに一致し、太字は追加条件です。種類には明朝・ゴシックに加え、仿宋・楷書・丸ゴシック・教科書・手書き・毛筆を用意し、合成設定は変更しません。漢字は簡体字・繁体字・日本語に分け、詳細と同じ代表文字を使います。文字の収録判定であり、地域の字体規格への適合を保証しません。選んだ全文字クラスの代表文字が確認済みの候補のみ表示します。未確認の候補はこの絞り込みを解除して探せます。Google Fonts の CSS 範囲とローカルの確認済み見本を使い、全字形の保証はしません。検査結果は次の検索・絞り込みで反映し、検査中に候補を消しません。ローカルの一覧とプレビューは Regular・Bold などの既知ウェイトを共有し、ファイル確認後は宣言ウェイトと可変軸を優先します。ラベルだけを更新し、全ファイルの走査や自動並べ替えは行いません。 手書きは Google Fonts 公式の Handwriting 分類を使い、「その他」にまとめません。Zhi Mang Xing、Long Cang、Liu Jian Mao Cao は公式説明に基づき書道にも分類します。複数の種類を持てます。仿宋・楷書・書道などの細分類には名前からの推定を含むため、メニューにその旨を表示します。不明な候補は残します。 欠字は選択画面の見本内に波線で表示します。基本設定ではフォントだけを選び、太さは「ウェイト別」で調整します。ウェイト行から開いた場合は、その段階に使うフォントのウェイトを指定できます。可変軸は右側フッターに常時表示します。
ライブラリを初めて開く操作でローカルフォントの読み取りを試します。ブラウザーのアクセス許可が必要で、クリックなどの操作を求められる場合もあります。同じページでは成功した結果を再利用し、失敗時だけ再試行を表示します。非対応ブラウザーでは検索欄に正式名を入力できます。ファミリーと書体でまとめ、選択時に可変軸を読み取ります。Regular・Bold・Italic などの書体が複数ある場合のみ、右側の選択中フォントの下に「書体・ウェイト」を表示します。CSS local() で読めない名前は、許可済みのフォントデータからプレビューを試します。CSS の書き出しでは引き続き名前を参照します。見本の読み込み、文字の検査、欠字は区別し、見本の失敗だけで未インストールと判断しません。絞り込みは既知の情報や名前に明記された種類・太字を利用し、ファイル未読だけで太字非対応と判断しません。未確認の正式名も試せますが、読み込み失敗は明示します。データは現在のページ内だけに保持します。 字形やウェイト情報の背景更新では、編集中の表入力を置き換えず、入力を中断しません。
ファイルはドロップまたは選択して読み込み、このページの一覧から再利用できます。同一のファイルは重複追加せず、名前を取得できればファミリーとスタイルを表示します。不正なファイルで現在の選択を置き換えません。一覧とファイルは現在のページ内だけに保持し、再読み込み後は再指定が必要です。プリセットや共有リンクには含みません。
基本設定ではフォントを選び、太さは「ウェイト別」で調整します。見本ツールバーのウェイトとサイズはプレビュー専用です。ウェイト行から選択した場合、その段階に使うフォントのウェイトを指定でき、文字クラス全体への置き換えも選べます。可変軸は右側フッターに常時表示され、文字クラスの全ウェイトに適用されます。「このフォントを使う」で保存し、閉じる・キャンセルでは保存しません。
初期テキストは編集中の文字クラスと校正言語に合わせます。直接入力、改行、貼り付けができ、候補やプレビュー/情報を切り替えても保持します。欠字は入力中の見本だけを対象に、メイン画面と同じ波線で示し、メイン校正の欠字件数は表示しません。検査できない場合は情報タブで不明と表示します。B のウェイト操作と文字サイズを同じツールバーに配置します。B または数値からスライダーを開き、入力、矢印キー、アイコンのドラッグでも調整できます。可変フォントは範囲内の値と 400/700 の目盛、段階式は実在するウェイトを使い、単一ウェイトは固定です。見本の太さとサイズはプレビュー専用で、合成に使うウェイトを変えません。高さは内容、フォント、サイズ、列幅に合わせます。欠字表示は入力値を書き換えず、カーソルと IME を保ちます。開き直すと文字クラス見本に戻り、編集内容はプリセット・共有・書き出しに含めません。 波線の文字にポインターを置くと、その文字が未収録でシステムフォントが補っていることを確認できます。 校正本文をクリックして直接編集できます。内蔵サンプルを初めて変更するとカスタムタブを作成して選択し、以降は同じテキストを更新します。内蔵サンプルは変更しません。カスタムテキストは切り替え・削除・ブラウザー内保存に対応し、追加ボタンで現在のテキストを複製できます。改行、プレーンテキストの貼り付け、IME、テキストの元に戻す/やり直しをサポートします。本文はフォント設定、共有リンク、書き出しには含みません。フォント一覧ではコンピューターと Google のアイコンでローカルと Google Fonts を区別し、ホバーで取得元とウェイトの詳細を表示します。
漢字以外の文字クラスでは「漢字に合わせて自動調整」が初期選択されます。確定時に選択した文字クラスだけを既存の参照規則で調整します。数字は欧文を参照し、各文字クラスの用途と比率を保ちます。チェックを外すと従来の調整値を維持します。単一ウェイトではその段階のサイズと調整可能な太さだけを変更し、共通ベースラインは変えません。計測後にまとめて適用し、キャンセルでは保存しません。参照不足時はフォントのみを選択して知らせます。選択と調整は一度で取り消せます。
デスクトップでは左右を同じ幅にし、中央の線で区切って個別にスクロールします。上部の「ローカルフォント + Google Fonts/フォントファイル」タブの下に広い作業領域を設けます。左は大きな見本付きの一覧、右は区切り線で分けた選択中フォントのプレビューと設定です。それぞれ独立してスクロールし、列見出しは付けません。検索欄の下に取得元・種類・ウェイト・文字セットの絞り込みを常時表示し、選択した条件をその場で確認できます。取得元と種類は複数選択でき、同じグループ内はどれか一つ、グループ間はすべての条件に一致する候補を表示します。未選択のグループは制限しません。解除では検索文字を残し、狭い画面では折り返します。上下の余白を小さくし、確定操作は常に表示します。検索と正式名入力は同じ欄を使い、結果がない場合は対象の取得元で明示的に試せます。入力途中では読み込みません。欠字は見本に、検査失敗は情報タブに表示します。一覧の外枠をなくし、候補の間を線で区切り、下端を作業領域に揃えます。右側の「プレビュー/情報」で見本と取得元・ウェイト・主な文字・収録情報を切り替えます。欧文・数字・韓国語のバッジと欠字の凡例は表示しません。確定とキャンセルは右列の下端、自動調整はその上に配置します。狭い画面では縦に並べ、一つの作業領域でスクロールし、フッター操作を表示し続けます。 ライブラリでフォント未選択時は右側に空の状態を表示します。ファイル一覧が空の間は右側を隠し、説明付きのドロップ領域が作業領域全体を使います。読み込み後は左右の配置に戻り、ドロップ領域をコンパクトにします。可変軸は右側フッターの確定ボタンの上に置き、デスクトップの長い軸一覧は個別にスクロールします。狭い画面では軸も作業領域と一緒にスクロールし、確定ボタンは表示し続けます。可変軸のあるフォントは「この設定を使う」、それ以外は「このフォントを使う」で確定します。
情報は名称、フォントの特性、作者とライセンスに統一して整理します。日本語・英語の表示名、ファミリー、スタイル、PostScript 名、取得元、ウェイト、現在のソースのスタイル数、Unicode 文字数、等幅・可変の種類、ファイルサイズ、デザイナー、メーカー、ライセンス説明・URL を表示できます。文字数はゼロ以外のグリフに対応する Unicode 文字の数で、グリフ総数とは異なります。ローカルファイルは情報を開いたときに選択中のものだけ読み取り、取り込み済みデータは再利用します。ライブラリ全体は走査しません。TTF・OTF・WOFF のテーブルを読み取り、WOFF2 や Google Fonts の Web ソースで取得できない項目はソースの情報不足、読めたフォント内にない項目は記載なしと区別します。検索用別名を埋め込み名として扱わず、ライセンスを推定しません。代表文字は言語全体の対応を保証しません。メタデータはページ内だけに保持し、設定・共有・書き出しには含めません。ドロップ領域の形式とローカル読み取りの説明を一つにまとめ、選択ボタンとの間隔を 24px にします。取り込み後はコンパクトになります。 デスクトップではフォント名・スタイル・プレビュー/情報タブを固定し、タブより下だけをスクロールします。狭い画面は引き続きワークスペース全体をスクロールし、詳細の見出しとタブがその範囲内で上部に留まります。代表文字の検査も他の情報と同じ二列に揃え、対応数と検査総数を表示します。イタリック情報はフォントの特性に含めます。ローカルのプレビューでは、同じファミリー・傾斜・幅のインストール済みウェイトファイルを切り替えます。可変フォントは連続範囲を使用し、静的フォントは既知のウェイトだけを選べます。擬似太字や未知ウェイトの推定はせず、未選択のファイルを一括走査しません。プレビューは選択中の基本書体や設定を変更しません。違いが太さだけならスタイル選択を隠し、傾斜・幅などにも違いがあれば残します。対応するイタリックファイルの選択は設定フッターに配置し、書き出し用で正体プレビューを変えないことを明記します。欧文・数字・共通約物・カスタム文字クラスなど必要な場合に表示し、既存の組み合わせは置き換えられます。読み込み失敗時は元の組み合わせを保持し、閉じる・キャンセルでは適用しません。 フォント内の他言語の表示名も個別に表示します。取得制限・書体の推定・代表文字検査・ライセンスの注意は情報タブの冒頭にまとめ、約物位置のラベルと名前の説明は省きます。Plain も Regular と同じ通常のスタイルとして扱います。
検索は一覧の絞り込みと候補数の表示だけを行い、結果なしと読み込み失敗を区別します。一覧外の正式名は明示的に試し、入力途中の名前を検査しません。取得中、見本の読み込み、ローカル権限待ち、失敗を別々に表示します。見本の待機が 12 秒を超えると再試行を案内し、遅れた結果で新しい選択を上書きしません。失敗しても候補と設定は保持します。未確認のローカルフォントは選択を続行でき、収録文字の検査失敗は不明として扱います。
ローカルフォント:local()
local() はファミリー名ではなく、フルネームか PostScript 名で照合します。たとえば Hiragino Sans GB ではなく、Hiragino Sans GB W3 または HiraginoSansGB-W3 と書きます。Safari はシステムにプリインストールされたフォントしか Web で使わせないため、自分でインストールしたフォントは Safari では効きません。閲覧者の環境にフォントがない場合は、ひとつ前の規則にフォールバックします。
Google Fonts
CJK フォントは Google Fonts で 100 以上のサブセットに分割され、それぞれに unicode-range があります。書き出し時にサブセットの範囲と文字クラスの範囲の共通部分を取り、必要なサブセットだけを残すので、欧文文字クラスは通常 1〜2 件になります。url は fonts.gstatic.com を指しています。本番ではダウンロードしてセルフホストすることをおすすめします。
複数のウェイトを書き出す
フォント名の下に「連続ウェイト」「段階ウェイト」と表示します。連続ウェイトは「連続ウェイト 200–900」のように、その範囲で任意の太さを入力できます。段階ウェイトは「段階ウェイト 400、700」のように決まった太さを持ち、数が多い場合は最小〜最大の範囲を表示します。マウスを重ねると全ウェイトを確認できます。これはフォント自体の情報で、書き出しモードは「ウェイト別」で選びます。正確な範囲は推測せず、可変軸があってもウェイト範囲が不明なら「ウェイト範囲不明」と表示します。ほかの文字クラスに追従する場合は、追従元の行の情報を参照してください。
連続モードでは、プレビューや Web ページで font-weight: 450 を指定すると、可変フォントも 450 で表示され、400 と 500 の間も使えます。フォントの対応範囲外では最も近い端点、静的フォントでは最も近い段階の太さを使います。可変フォントの太さの個別設定は一時的に無効になり、段階モードに戻すと復元されます。
スライダーはボタンと同じモノクロ配色を使い、横方向のトラックの両端をハンドルの中心と目盛りに揃えています。連続モードでは、表の左側にある2つのハンドルをドラッグして、100刻みで書き出す範囲を選びます。範囲外の行はグレーで残り、保存済みの調整も保持されます。範囲内の中間ウェイトも使えます。正確な端点は「書き出し」で入力できます。矢印キーで100、Shiftを押しながら操作すると10ずつ移動します。ドラッグは離したときに保存され、1回で取り消せます。Escでドラッグをキャンセルできます。サイズ列だけの場合は「漢字のサイズ」「半角欧文のサイズ」などの見出しを一段で表示します。静的フォントの太さを調整できる場合は、文字クラス名と太さ・サイズの二段の見出しを使います。
段階モードでは、「ウェイト別」で書き出すウェイトにチェックを入れると(書き出しダイアログでも選べます)、ウェイトごとに規則を 1 組ずつ生成します。選択済みの行の空白部分をクリックすると、そのウェイトをプレビューできます。書き出しのチェックは変わりません。プレビューの B アイコンかウェイト欄をクリックするとスライダーが開きます。直接入力や B アイコンのドラッグでも調整でき、数値はすぐに反映されます。段階モードでは選択済みのウェイトだけを使い、スライダーに目盛りを表示します。連続モードでは書き出し範囲内で無段階に調整できます。範囲内にある 400(Regular)と 700(Bold)の目盛りをクリックすると、そのウェイトに切り替わります。端点と目盛りのラベルはスライダーの下に一列で表示し、近すぎる端点のラベルは省略します。現在のウェイトの選択を外すと、最も近い選択済みウェイトに切り替わります。範囲外や未選択の値を入力した場合も、確定時に使える値へ調整します。ツールで設定したフォントは 400 に対応します。ほかのウェイトでは、Google Fonts のフォントは同じ差分で換算し(500 のフォントなら 700 のとき 800)、そのウェイトがなければ最も近いものを使います。ローカルフォントは名前から太字の名前を推測し(W3 → W6、Regular → Bold など)、このデバイスで確認します。フォントごとにウェイトの分布は異なるので、「ウェイト別」の表でウェイトごとに各文字クラスのサイズと太さを個別に調整できます。可変フォントの太さは任意の数値を直接入力でき、右側の矢印やキーボードの ↑↓ で 10 ずつ、Shift + ↑↓ で 100 ずつ調整できます。静的な Google Fonts は 100 刻みで調整し、存在しないウェイトは飛ばします。ローカルフォント名やファイル、そのウェイトだけ別のフォントにする場合は、そのセルか、行の末尾にある「⋯」メニューの「フォントを変更…」から「フォントを選択」で指定します。Google Fonts の静的フォントは実際にあるウェイトだけを表示します。グレーは自動で決まった値、青は個別に設定した値で、グレーの値を選び直すと個別の設定が解除されます。
ウェイトごとの規則はまとめられません。CSS 変数(var())は @font-face の中では無効で、ブラウザはその記述を捨てます。同じ font-family の中に font-weight: 700 の規則と 400 700 の規則が混ざると、Chrome は実測で別のグループとして扱い、片方しか使わないため、合成が効かなくなります。
容量の大半は、Google Fonts で 100 以上に分割された漢字フォントの規則です。「ベースフォント:Google Fonts を参照」では Google の CSS を @import で直接参照し、そのフォントを font-family の 2 番目に置いて、上書きする文字クラスだけを書き出します。書き出す CSS は通常数 KB です。サーバーは CSS を gzip で圧縮するのが一般的なので、書き出し欄の gzip 後のサイズが実際の転送量に近い値です。フォントファイルはページで使う文字の分だけダウンロードされ、CSS の長さとは関係ありません。
段階モードでフォント選択画面の変更を適用するか、追従先を変えると、各行で実際に使うフォントと太さを確認し、既知のウェイト範囲から明らかに外れる書き出しのチェックを外します。Web とフォントファイルの選択は別々に確認します。有効な個別の対応、静的フォントの範囲内の欠番、範囲が不明なフォントは維持します。チェックを外しても行の調整は削除せず、再選択できます。フォントの変更と自動解除はまとめて取り消せます。選択中のウェイトがすべて範囲外なら選択を維持し、手動確認を促します。範囲の広いフォントに変えても自動でチェックは戻しません。連続モードの選択と範囲は自動調整しません。
イタリック
イタリックの規則がないと、<em> や <i> の中の文字はすべてブラウザが擬似的に傾けます。欧文に本物のイタリックがあっても使われず、漢字まで斜めになります。そのため既定でイタリックを書き出します。各組の規則に font-style: italic の版が加わります。欧文は本物のイタリック(Google Fonts の Italic、読み込んだイタリックのファイル、ローカルの「… Italic」、または可変フォントの slnt / ital 軸)を使い、イタリックのない文字クラスは正体のファイルを italic として宣言するので、ブラウザは擬似的に傾けません。ベースフォントを @import で参照する場合、Google 側には正体しかないため、使用側の規則に font-synthesis-style: none を加えて正体のままにしています。
可変軸
「フォントを選択…」で、幅・グレード(GRAD)・オプティカルサイズなど、可変フォントのほかの軸を調整できます。Google Fonts はリクエストに書いた軸だけを残し、残りは既定値に固定してファイルから取り除くため、調整した軸はリクエストに加わり、ファイルはおよそ 2 倍になります。固定した値は @font-face の font-variation-settings に書かれ、Safari はこの行を無視して既定値で表示します。オプティカルサイズを「文字サイズに追従」にすると、ブラウザが実際の文字サイズから opsz を決めます。Chrome は実測で size-adjust で拡大した後のサイズを使うので、欧文が実際に表示される大きさと一致します。
「フォント」タブの「フォントの機能」にある「数字のスタイル」「スラッシュ付きゼロ」は font-variant-numeric に対応し、使用側の規則に書かれます(Chrome 52+、Firefox 34+、Safari 9.1+)。ページでは要素ごとに変えることもでき、たとえば表だけ等幅数字にできます。効果は数字を表示するフォントにこれらの OpenType 機能があるかどうかで決まります。ツールはそのフォントの既定の数字を調べ、ない機能を選ぶと知らせます。Google Fonts の Web フォントでは多くの機能が削られていて、オールドスタイル数字とスラッシュ付きゼロはありません。
行のメトリクス:合成フォントの行の高さ(line-height: normal)と、行の中のベースラインの位置は、スペースを受け持つ規則、つまり半角欧文のフォント(それも size-adjust で拡大した後のもの)から決まります。書き出しでは既定で、ベース以外の規則に漢字フォントの ascent-override・descent-override・line-gap-override を書きます。size-adjust がもう一度掛かるので、割り戻した値です。これで漢字フォントだけで組んだときと同じになります。Chrome 87+、Firefox 89+ が対応し、Safari は無視します。
繁体字中国語:台湾と香港
「対象の言語」の繁体字中国語は、台湾と香港の 2 つに分かれています。書き出しでは :is(:lang(…)) でよく使われる書き方をまとめて指定します。台湾版は zh-Hant・zh-TW、香港版は zh-HK・zh-Hant-HK とマカオの書き方に一致します。:lang(zh-Hant) は lang="zh-TW" に一致しないためです(ブラウザは地域から文字体系を推測しません)。簡体字も同様に zh-CN・zh-SG を加えます。
台湾と香港では句読点を字面の中央に置き(中国大陸・日本は左下寄り)、字形もそれぞれの規範に従います。ツールは全角約物の位置を測り、ファミリー名から字形の地域を判断します。校正刷りの言語と一致しないときは文字クラスの表で、対象の言語と一致しないときは書き出し欄で知らせます。源ノ角ゴシックや Noto CJK のように 1 つのファイルに複数地域の字形を持つフォントは lang で切り替わるので、測るときも言語を指定しています。
文字クラスの表には「注音符号」の行があり、声調記号 ˊ ˇ ˋ ˙ も受け持ちます。もとは欧文の範囲にあり、移さないと欧文フォントで表示されるためです。フランス語などのアクセント付き文字(é・à)は別の符号位置なので影響しません。必要なら歯車から声調記号を半角欧文に戻せます。
アプリのコード(試験的)
iOS・Android・Flutter には合成フォントがありません。書き出しの「アプリのコード」は Swift・Kotlin・Dart のコードを生成し、文字クラスごとにテキストを区切って、それぞれにフォント・サイズ・ベースラインの調整を設定します。文字の範囲は Web の書き出しとまったく同じです。コード内のフォント名(PostScript 名・ファイル名・family)は推定なので、アプリに同梱したフォントに合わせて直してください。サイズの違う文字が混ざると行の高さが変わり、Web のような行の高さの補正はありません。Flutter ではベースラインを部分的に動かせません。3 種類ともコンパイルし(Kotlin は Android API に対して、Flutter は analyze と test)、区切り方も確認済みですが、実機での組版の見た目は確認していません。問題を見つけたら GitHub で PR や Issue をお寄せください。フォントのライセンスが許せば、生成したフォントファイルをアプリに同梱するのがいちばん確実です。
フォントファイル
「フォントファイル」タブでは、合成フォントを本物のフォント(TTF・WOFF2・OTF から選べます)にします。Figma、Keynote、Word など合成フォントに対応していないアプリで使うためのものです。書き出す CSS と同じ規則で、各フォントから担当する文字だけを取り出し、サイズとベースラインを調整してから 1 つのフォントにまとめます。行の高さは漢字のベースフォントに合わせます。処理はブラウザの中で行い(Pyodide + fontTools)、フォントがサーバーに送られることはありません。
元のフォント:Google Fonts のフォントは google/fonts リポジトリから完全なファイルをダウンロードします。Web 用の配信ではほとんどの OpenType 機能が削られているためです。アップロードしたフォントはそのまま使い、このコンピュータのフォントはブラウザのローカルフォント API で読み取ります(Chrome、Edge。許可が必要です)。CFF アウトラインの OTF は TrueType の曲線に変換し(誤差は 1/1000 em 以下)、フォントコレクション(TTC)からは使われている 1 書体だけを取り出します。合成できるのは OFL や Apache など改変を許可するライセンスのフォントで、ライセンス不明のフォント(OS 付属のフォントや商用フォントを含む)は、改変する権利があることを先に確認する必要があり、作ったファイルは自分だけで使います。ヒンティングは削除されます(影響は Windows の小さいサイズだけです)。和欧間の 1/8 em のアキはブラウザが自動で入れるもので、ほかのアプリでは入りません。
形式:結合は TrueType の曲線でしか行えないため、OTF は最後に結合結果を CFF の曲線に変換して作ります。ブラウザで動くフォントライブラリ(fontTools)は、和文 OTF で一般的な CID 形式の CFF を結合できず、TrueType と CFF の曲線を 1 つのフォントに混ぜることもできません。CFF を直接結合して CID 形式の OTF を作れる Adobe AFDKO は C のプログラムで、ブラウザでは動きません。そのため元のフォントが CFF の場合は「3 次曲線 → 2 次曲線 → 3 次曲線」と変換され(誤差は 1/1000 em 以内で、印刷では見分けられません)、できる OTF も CID 形式ではありません。今のアプリでは問題なく使えますが、CID フォントを求める古い印刷ワークフローでは受け付けられないことがあります。
font-size-adjust を使わない理由
font-size-adjust(2 値構文は Chrome 127、Firefox 92、Safari 17 が対応)でもサイズをそろえられますが、要素内のすべてのフォントに効きます。欧文を目標のキャップハイトに合わせると、漢字フォントも付属欧文のメトリクスに応じて拡大縮小されます。文字クラスごとにフォントを割り当てることもできないため、引用符の問題も解決しません。さらに MDN によれば、@font-face の size-adjust と併用すると size-adjust が効かなくなります。合成フォントを使う要素には font-size-adjust を指定しないでください。校正刷りの「他の方法と比較」で違いを確認できます。
CSS ネイティブの CJK 組版プロパティ
これらのプロパティは合成フォントと干渉せず、組み合わせて使えます。「組版」の設定は書き出す使用ルールに含まれます。揃え・両端揃えの方法・段落の折り返しはページのレイアウトに属するため、校正の「表示」メニューにあり、プレビュー専用で書き出しません。下の表は 2026 年 10 月時点の MDN 互換性データで、各ブラウザが対応を始めたバージョンです。
| プロパティ | 働き | Chrome / Edge | Firefox | Safari |
| text-autospace | 漢字・かなと欧文・数字の間に 1/8 em のアキを自動で入れる。Chrome は normal / no-autospace のみ対応。実測の初期値は no-autospace(仕様では normal)なので、明示的に書く必要がある。 | 140 | 145 | 18.4 |
| text-spacing-trim | 全角約物の詰め。隣接する約物の詰めや、行頭の始め括弧の半角化。実装済みは normal / space-all / space-first / trim-start のみ。 | 123 | — | — |
| word-break: auto-phrase | 文節単位で改行し、語の途中で行が分かれるのを避ける。lang="ja" と lang="ko" でのみ有効。 | 119 | — | プレビュー版 |
| line-break | 禁則の強さ。strict では小書きのかなや長音記号の行頭をより厳しく禁止する。 | 58 | 69 | 11 |
| text-wrap: pretty | 段落の最終行に 1〜2 文字だけ残るのを避ける。Chrome は段落の最後の 4 行だけを調整する。Safari は段落全体を組み直して行を短くし、ぶら下がりも効かなくなる。 | 117 | — | 26 |
| text-wrap: balance | 各行の長さをそろえる。見出し向き。 | 114 | 121 | 17.5 |
| text-justify | 両端揃えの方法。inter-character は字間でアキを配分する。 | 145 | 55 | — |
| hanging-punctuation | 約物を版面の外にぶら下げる。Safari では text-wrap が pretty のときはぶら下がらない。 | — | — | 10 |
| text-box | 最初の行の上と最後の行の下のハーフレディングを削る。ideographic エッジに対応しているのは今のところ Firefox のみ。 | 133 | 154 | 18.2 |
| text-combine-upright: all | 縦組みの縦中横。数字を別の要素で包む必要がある。digits 値はどのブラウザも未実装。 | 48 | 48 | 15.4 |
出典:MDN text-autospace、text-spacing-trim、font-size-adjust、MDN browser-compat-data、Chrome:CSS の新しい国際化機能。
Matching rules
One font-family can have several @font-face rules. For each character, the browser searches from the last rule backward and uses the first rule whose unicode-range includes it and whose font actually has the glyph. So the base font (Han) comes first, with no range, and covers everything else; character classes such as Western and Digits come after it and take over their own ranges; exception characters come last and have the highest priority.
Character class rows show their names and relevant status. Character coverage is explained in the character class help and group settings. Digits includes only half-width 0–9; full-width digits belong to Full-width symbols. Preset names describe font pairings; labels identify the script and region. The gear to the left of Share opens Settings; the proof’s View menu controls the preview.
A pulsing gray dot before a font name means it is loading; a red dot means loading failed. Hover or focus the dot with the keyboard for its status or the reason it failed. The status reflects the font actually used in the preview; Continuous mode checks the full variable weight range. Dots are hidden when the font is ready and for character classes that follow another character class’s font.
Presets and saving
The first card, “Current setup”, shows your current pairing and stays visible when you filter presets. “Save as new” fills in an editable name from the main fonts in your setup, adding a number if needed to avoid duplicates, so you can save a copy directly. Unnamed setups show the same suggested name on the card and in the save dialog; existing names are kept. When editing your own preset, “Save changes” becomes available when there are changes and updates it after a second click to confirm. Entering an existing name shows a warning and also requires confirmation before replacing it.
Presets stay in this browser and exclude font files. Filters apply only to the presets below; you can save your current setup even when no presets match. Switching presets prompts you to save unsaved changes. Failed saves preserve your current work and existing presets.
Appearance and preview colors
Choose Light, Dark or System in the top bar’s Settings. System follows changes to your device’s color scheme. The proof toolbar’s View menu lets you set the background and text color with a color picker or hex code. Changes appear immediately in the proof and metric chart; editing controls keep the theme colors. Invalid hex input returns to the last valid color when you leave the field. Reset colors clears custom values and restores the current theme’s defaults. Colors can be set independently, and custom values remain when you switch themes. Settings and View group related controls and share consistent label alignment and spacing.
These preferences stay in this browser across reloads, preset changes, undo and shared configuration imports. They are excluded from presets and share links and do not affect exported CSS, app code or font files.
Sharing configurations
The outlined Share button, to the left of Export, copies a link to the current configuration without saving a preset first. The link captures the fonts, sizes, weights, baselines, variation axes, character groups, exceptions, text layout and export settings at that moment. Later edits do not change links already sent.
Links exclude font files, custom proof text, history and other saved presets. Recipients see a built-in proof and can edit, save a preset or undo the import to restore their previous settings. Google Fonts load again; local fonts must be installed and uploaded files supplied separately. Missing fonts are shown in Fonts. Configuration data stays in the URL fragment and needs no server storage. Oversized links show a notice; a manual copy field is available when the clipboard cannot be used.
Size: size-adjust
size-adjust scales a font's glyphs and metrics by a percentage. It is supported in Chrome/Edge 92+, Firefox 92+ and Safari 17+. It also scales the font's ascent and descent, so with line-height: normal the line spacing can become uneven; set a fixed line-height.
In Base settings, size and baseline can be typed directly or adjusted by 0.5 using the arrows on the right of each input. The size inputs in Weights work the same way. Hold Shift while pressing ↑↓ on the keyboard to adjust by 5. Clear an input to restore its inherited value. Arrows appear on hover or focus and stay visible on touch screens; the numbers stay aligned as the arrows appear or disappear.
Baseline shift needs JS
@font-face has no baseline descriptor. All glyphs on a line sit on the alphabetic baseline, and CSS cannot move them per font. When you use the tool's baseline setting, the export includes a small script that wraps the affected characters in a <span> and moves them with relative positioning, without changing the line height. For pure CSS, keep every baseline at 0.
Auto-adjust
“Auto-adjust”, at the top right of Base settings, matches each independently chosen font by character class. The Han base font stays unchanged. Following character classes inherit their source’s results; explicit size and baseline overrides are kept. When every target font matches its reference, a notice appears and settings stay unchanged. Fine-tune the results or undo the whole operation in one step. Notices slide in from the bottom, pause, then fade out; reduced motion disables the animation.
References. Western text uses the Han font’s built-in Latin letters, balancing capital and lowercase x heights; when those letters are missing, size is estimated from the Han character face. Independent digits use the Western digits fitted in this run. Kana, full-width punctuation, symbols, Zhuyin and independent shared punctuation use the corresponding characters in the Han font. Kana, digits and Zhuyin match character heights. Full-width punctuation, symbols and shared punctuation match character advances for size, then corresponding glyph positions, preserving small punctuation faces and regional placement rather than enlarging every glyph to Han height.
Exception characters. Independent groups of up to 64 characters from one original character class use that character class’s current font as their reference. Mixed character classes, unclassified characters, larger ranges and missing reliable references keep their settings and are reported. If any measured weight lacks a reference, that entire character class is kept, so changing its base cannot indirectly alter an unmeasured weight.
Weight and baseline. Stepped mode compares strokes at the fitted size and chooses closer available weights without making bold lighter than body text in the same font. Western text uses the main strokes of H and h; other character classes estimate stroke width from horizontal and vertical slices through corresponding characters. These measurements are a starting point for visual matching. Google Fonts and local or uploaded fonts with a weight axis are supported. Continuous mode, single-weight fonts and unreliable stroke measurements keep weights unchanged. Selected export weights and always 400 are measured. The 400 result goes into Base settings; other sizes are stored separately when they differ by at least 0.5 percentage points. Only the base baseline is stored; shifts below 2% em become 0. Web shifts need JS; font files store the positions directly. Weight matching also works in older browsers. If a selected additional variation axis cannot be measured, that character class keeps its settings and is reported.
Reset and limits. The reset button beside each character class heading in Weights restores its base size to 100%, baseline to 0 and adjustable weight to the available value nearest regular 400, then clears its per-weight size, weight and font overrides. It keeps the base font choice, other variation axes and character classes, shared font-name mappings, export selections and preview weight, and can be undone. Auto-adjust cannot create missing weights and does not change export selections. Check shapes, serif contrast and design proportions in body text, then fine-tune or change fonts as needed.
Choosing fonts
The library includes every Google Fonts family tagged for Simplified Chinese, Traditional Chinese, Hong Kong Chinese or Japanese in the bundled official metadata, alongside the existing Western and Korean choices. Updating that metadata updates the list; opening the picker does not fetch the entire live Google catalog. Only visible list specimens load, followed by the selected font’s detailed preview, without downloading every font in advance. Sorting appears above the list, to the right of the candidate count, as a borderless button showing the current order; the filter bar contains only filters. Font library combines Google Fonts and installed families with source labels; same-name families remain separate choices. Known native names and labelled search aliases explain matches. Search family, full or PostScript names, ignoring case, full-width forms, spaces, hyphens and underscores. The default order is name A–Z; the other option is widest known weight range, with unknown ranges last. Late discoveries append without moving existing rows. Explicit sorting preserves the query, filters and current specimen. List specimens emphasize each font’s primary script, using mixed kanji and kana for Japanese and matching text for Simplified Chinese, Traditional Chinese, Korean and Western fonts. Google Fonts uses official primary-script metadata, with known local names as a fallback. Unknown languages keep the character class sample; the right-hand preview still follows the character class being edited. Short weight lists use 400/700.
A vertical divider separates the list and preview on desktop, changing to a horizontal divider when stacked. Source and weight information sits at the top right of each row, wrapping below the name in narrow lists. One or two stepped weights are listed directly; larger sets show a count and range. Unread local files show only the weights found so far, without claiming a stepped or variable type. Includes italics requires an Italic face or ital axis. Oblique faces, a slnt axis alone and browser-synthesized slant do not count. Unknown metadata stays eligible, without scanning all font files. This filter does not change export settings. The footer’s Auto-adjust to match Han after applying option starts checked and runs only after confirming the font choice. Canceling applies nothing. Coverage filters focus on Simplified, Traditional and Japanese Han, kana, full-width punctuation, symbols and Zhuyin. Missing Latin letters, digits and shared punctuation are still flagged when checking the selected font against the proof. Weight type contains Continuous (VF), Stepped and Supports bold. Either type may match; bold support is an additional requirement. CJK style tags use known designs and explicit names without changing composition settings. Han coverage is split into Simplified, Traditional and Japanese samples shared with font details. Multiple character classes must all match. Character presence does not establish region-specific glyph forms or full character-set coverage. Unknown facts stay eligible. Google Fonts uses bundled CSS ranges; installed choices reuse completed default-face checks. New coverage findings apply on the next search or filter action. Local list and preview labels share named faces such as Regular and Bold; read font-declared weights and variable axes take precedence. Metadata updates labels in place without scanning all installed files or automatically reordering rows. The Handwriting filter uses the official Google Fonts classification instead of grouping it under Other. Official descriptions also place Zhi Mang Xing, Long Cang and Liu Jian Mao Cao in calligraphy. Fonts can have multiple styles. The style menu notes that finer labels such as Fangsong, Kai and calligraphy include name-based estimates; unknown styles remain eligible. Missing glyphs are underlined in the picker specimen. Base settings choose the font; adjust its weight in the Weights table. The specimen toolbar changes preview weight and size only. Opening the picker from a weight row lets you set the font weight for that row or replace the font across the character class. Variation axes appear in the right footer and apply to every weight of the character class. Use this font saves these settings; Close and Cancel discard them.
Opening the library first attempts installed-font access automatically. Browser permission is required, and the browser may require the opening click as user activation. Successful results are reused within the page; a retry action appears only after failure. Unsupported browsers can still try exact names through search. Families group their faces, and selecting one reads its variation axes. Font face appears below the selected font on the right only when multiple faces such as Regular, Bold or Italic are available. If CSS local() cannot load a name, the preview tries the authorized font data; CSS exports still reference installed names. Specimen loading, coverage checks and missing characters have separate feedback. An unavailable specimen does not mean the font is uninstalled. Filters use known metadata or explicit style names; an unread face is not assumed to lack bold. Unconfirmed exact names remain usable with explicit loading feedback. Font records and accessed data stay in the current page session. Background glyph and weight metadata updates preserve active table fields instead of replacing them during typing.
Drop or choose font files, then search and reuse them from the imported-font list for other character classes or weights. Identical files are not added twice. Readable name tables provide family and style names; otherwise filenames are shown. Invalid files keep the previous choice. Files and the list stay in this page session and must be provided again after reload; presets and share links do not include binaries.
Base settings choose the font; adjust its weight in the Weights table. The specimen toolbar changes preview weight and size only. Opening the picker from a weight row lets you set the font weight for that row or replace the font across the character class. Variation axes appear in the right footer and apply to every weight of the character class. Use this font saves these settings; Close and Cancel discard them.
Specimens start with text for the edited character class and proof language. Type, add line breaks or paste directly; changing candidates or Preview/Info tabs preserves the draft. Missing glyphs in this specimen use the same wavy underlines as the main proof; the picker no longer reports missing-character counts for the main proof. Failed coverage checks appear only in Info. Weight and size share a compact toolbar. Click B or the number to open the weight slider, type a value, use arrow keys or drag the icon. Variable fonts use their range with 400/700 shortcuts; stepped fonts use real weights and single-weight fonts remain fixed. These preview settings never change the weight selected for the composite. The editor grows with content, font, size and pane width. Highlighting never rewrites its value or disturbs the caret or IME composition. Reopening restores character class text. Drafts never enter presets, share links or exports. Hover over an underlined glyph to see which character is missing and that the system supplies it in the preview. Click the proof text to edit it directly. The first change to a built-in sample creates and selects one custom tab; further typing updates that tab and leaves the built-in sample intact. Custom texts can be switched, deleted and saved in this browser; the add button duplicates the current text. Editing supports line breaks, plain-text paste, IME, and text undo/redo. Proof text stays outside font configuration, share links and exports. The font list uses computer and Google icons for installed and Google Fonts sources, with source and weight details on hover.
Non-Han character classes default to “Auto-adjust to match Han.” Confirming measures only the selected character class using the existing class-specific references: digits match Western text, while other character classes keep their intended proportions. Uncheck it to preserve adjustments. A single-weight selection adjusts only that step’s size and adjustable weight, leaving the shared baseline intact. Results apply together after measurement; Cancel saves nothing. If a reliable reference is unavailable, the font is selected while adjustments are preserved and a notice is shown. Font selection and matching undo together.
Desktop panes have equal widths with the divider at the workspace center and independent scrolling. Installed + Google Fonts and Font file tabs sit above a wide workspace. Larger specimens fill the list on the left; a preview separated by a divider on the right holds the selected font and its settings. The panes scroll independently, without column headings. Source, style, weight and character-set filters stay below search; bold support lives inside Weight type. Source and style allow multiple choices: any selected value within a group matches, while groups combine. An unchecked group imposes no restriction. Clearing filters keeps the search text, and the row wraps on narrow screens. The dialog fills the available height with a small outer margin and fixed footer actions. Search also accepts exact names; when no choices match, explicit try actions respect the source filter. Typing alone never loads an unknown name. Missing glyphs are marked in the specimen; failed checks live in Info. The list has no outer frame, uses row separators and aligns with the workspace bottom. Preview and Info tabs on the right separate specimens from source, weights, primary script and coverage details. Info omits Latin, digit and Korean badges and the missing-glyph legend. Confirm and Cancel stay at the bottom of the right column, with automatic matching above them. Narrow screens stack the panes in one workspace scroller and keep footer actions visible. With no library font selected, the right pane shows an empty state. An empty file library hides the detail pane and gives the drop area the full workspace, with its status note inside. Importing files restores the two-pane layout and makes the drop area compact. Variation axes sit above confirmation in the right footer. Long axis lists scroll separately on desktop; on narrow screens axes join the workspace scroll while actions remain visible. Fonts with variation axes use “Use this configuration”; other fonts use “Use this font”.
Info consistently groups names, font properties, and credits and license. It shows available localized, English and other embedded language display names, including Japanese, family, style, PostScript name, source, weights, styles in the current source, Unicode character count, spacing, variable/static type, current file size, designer, manufacturer, license description and URL. Character counts use Unicode values mapped to nonzero glyphs, not the total glyph count. Only the selected installed binary is read when Info is opened; imported data is reused without scanning the installed library. TTF, OTF and WOFF tables are supported. Missing full metadata from WOFF2 or Google Fonts web sources is labelled unavailable from the source, distinct from fields absent in a readable font. Search aliases are not embedded names; licenses are never inferred. Representative checks do not guarantee full language coverage. Metadata stays in this page, outside configuration, shares and exports. Format and browser-only reading notes form one compact group, 24px from the file button in the empty drop area; the imported-file entry stays compact. On desktop, the font name, style and Preview/Info tabs stay fixed; only the content below the tabs scrolls. Narrow screens keep one workspace scroll, with the detail heading and tabs sticking within their section. Representative checks use the same two-column fields as other metadata, showing supported and sampled counts; italic information belongs to font properties. Local preview weight selects real installed files in the same family, slant and width variant, using known steps (including Plain as a regular face); variable fonts retain continuous ranges. It never synthesizes bold, guesses unknown weights or bulk-reads unselected binaries. Preview changes do not modify the chosen base face or configuration. Hide the redundant style selector when faces differ only by weight; retain it for slant, width or other variants. Companion italic files are configured in the footer, explicitly for italic output without changing the upright preview. Show this for relevant Western, digit, shared-punctuation or custom character choices, and retain replacement for existing pairs. Invalid imports preserve the pair; Close and Cancel never apply it. Other embedded language names appear as separate fields. Source limitations, style inference, representative checks and license notes are grouped at the top of Info; punctuation-position labels and the name explanation are omitted.
Search filters the list and reports its count; no results is separate from loading failure. Names outside the catalog require an explicit attempt, and partial manual names are not probed. Fetching, specimen loading, installed-font permission and failure have distinct states. After 12 seconds the specimen reports a delay and offers retry; late results cannot replace a newer choice. Failure preserves the candidate and configuration. Unconfirmed installed fonts remain selectable. Failed coverage checks report unknown rather than full support.
Installed fonts: local()
local() matches a font’s full name or PostScript name, not its family name. For example, write Hiragino Sans GB W3 or HiraginoSansGB-W3, not Hiragino Sans GB. Safari lets web pages use only the fonts that come with the system; fonts you installed yourself don’t work in Safari. If a visitor’s computer doesn’t have the font, the browser falls back to the previous rule.
Google Fonts
On Google Fonts, CJK fonts are split into a hundred or more slices, each with its own unicode-range. On export, the tool intersects each slice’s range with the character class’s range and keeps only the slices it needs, so the Western character class usually ends up with one or two rules. The URLs point to fonts.gstatic.com; for production, download the files and host them yourself.
Exporting several weights
Font names show “Continuous weights” or “Stepped weights”. Continuous weights accept any value in their range, for example “Continuous weights 200–900”. Stepped weights offer fixed values, for example “Stepped weights 400, 700”; longer lists show their lightest-to-heaviest range, with the full list on hover. These labels describe the font’s capabilities; choose the export mode separately in Weights. Ranges are never guessed. Fonts with variable axes but no readable weight range show “Weight range unknown”. Fonts that follow another character class use the information in that character class’s row.
In Continuous mode, setting the preview or web page to font-weight: 450 displays variable fonts at 450, rather than choosing between 400 and 500. Values outside a font’s supported range use the nearest endpoint; static fonts use the nearest weight. Individual variable font weight adjustments are temporarily ignored and restored when you switch to Stepped.
Sliders use the same neutral colors as buttons, with horizontal track endpoints aligned to thumb centers and ticks. In Continuous mode, drag the two handles beside the weight rows to choose an export range in steps of 100. Rows outside the range stay visible but inactive, and their saved adjustments are kept. The range still includes intermediate weights; exact endpoints can be entered in Export. Keyboard arrows move a handle by 100, or 10 with Shift. A drag is saved on release and can be undone in one step; Escape cancels it. When the table has only size columns, it uses one header row, such as “Han size” and “Western size”. Static fonts with adjustable weights keep the two header rows for character class names, weight and size.
In Stepped mode, check the weights to export in Weights (you can also choose them in the export dialog); each weight gets its own set of rules. Click empty space in a selected row to preview its weight without changing the export selection. Click the B icon or preview weight field to open a slider. You can also type a number or drag B; the number updates as you adjust it. Stepped mode previews only selected export weights, shown as slider stops. Continuous mode adjusts smoothly within the export range, with clickable marks for 400 (Regular) and 700 (Bold) when they fall within that range. Endpoints and shortcut labels share one row below the slider; endpoint labels are omitted when too close to a shortcut. Removing the current preview weight selects the nearest remaining weight. Typed values outside the range or between selected weights snap to an available value when committed. The fonts you set in the tool correspond to 400. For other weights, Google Fonts fonts are shifted by the same difference (a font set at 500 becomes 800 at 700), or the nearest available weight if that one doesn’t exist; for installed fonts, the tool guesses the bold name (W3 → W6, Regular → Bold, and so on) and checks for it on this computer. Fonts don’t distribute their weights the same way: in the Weights table you can adjust each character class’s size and weight separately for each weight. For variable fonts, type any weight or use the arrows on the right or keyboard ↑↓ to adjust it by 10 (Shift + ↑↓ for 100). Static Google Fonts step by 100, skipping unavailable weights. To set an installed font name, a font file, or a different font for just that weight, click that cell, or use “change font…” in the “⋯” menu at the end of the row, and choose it in “Choose font”. For static Google Fonts fonts, only the weights the font actually has are listed; grey values are computed, blue ones are set for that row, and picking the grey value again clears the row’s setting.
The rules for different weights can’t be combined. CSS variables (var()) don’t work inside @font-face; the browser simply drops the descriptor. If some rules in one font-family say font-weight: 700 and others say 400 700, Chrome (in testing) splits them into two groups and uses only one, and the composite font stops working.
Most of the size comes from the hundreds of slices of the Han font on Google Fonts. “Base font: Link Google Fonts (shortest)” references Google’s CSS directly with @import, puts that font second in font-family, and writes only the character classes that override it, so the exported CSS is usually just a few KB. Servers usually compress CSS with gzip, so the gzip size shown in the export panel is closer to what is actually transferred. Font files are downloaded only for the characters a page uses, regardless of the length of the CSS.
In stepped mode, applying changes in the font picker or changing which character class a row follows checks the actual font and weight used in each row. Selected export weights clearly outside a known range are unchecked, with Web and font-file selections checked separately. Valid individual mappings, gaps within a static font’s range, and fonts with unknown ranges are kept. Unchecking a row preserves its adjustments, and you can select it again. The font change and automatic unchecking can be undone together. If every selected weight in a group is out of range, the selection is kept with a notice to review it. Switching to a font with a wider range does not select more weights. Continuous-mode selections and ranges are not adjusted.
Italics
Without italic rules, the browser synthesizes slanted text for everything inside <em> and <i>: Western text doesn’t use its real italic even when one exists, and Han characters get slanted too. So italics are exported by default, and each set of rules gets an extra copy with font-style: italic: Western text uses a real italic (the Italic from Google Fonts, an uploaded italic file, an installed “… Italic”, or the slnt / ital axis of a variable font); character classes without an italic use their upright file, also declared as italic, so the browser doesn’t synthesize one. When the base font is referenced with @import, Google only provides the upright style, so the usage rule adds font-synthesis-style: none to keep it upright as well.
Variable axes
In “Choose font…” you can adjust a variable font’s other axes, such as width, grade (GRAD) and optical size. Google Fonts keeps only the axes named in the request, pins the rest at their defaults and removes them from the file, so any axis you adjust is added to the request and the file roughly doubles in size. Pinned values are written to font-variation-settings in @font-face; Safari ignores that line and shows the defaults. When optical size is set to “Follow font size”, the browser sets opsz from the actual font size; in testing, Chrome uses the size after size-adjust scaling, which matches the size at which the Western text is actually shown.
“Figure style” and “Slashed zero” under “Font features” in the Fonts tab map to font-variant-numeric and are written into the usage rule (Chrome 52+, Firefox 34+, Safari 9.1+); on the page you can also change them per element, for example to use tabular figures only in tables. Whether they work depends on whether the font that displays the digits has these OpenType features: the tool detects which kind of figures the font uses by default and warns you when you pick a style it lacks. The Google Fonts web fonts have most features removed and have no old-style figures or slashed zero.
Line metrics: the browser takes the composite font’s line height (line-height: normal) and the position of the baseline within the line from the rule that covers the space character, that is, the Western font, and after size-adjust scaling. By default, the export writes the Han font’s ascent-override, descent-override and line-gap-override into every rule other than the base font; size-adjust scales them again, so the values written are already divided by it. Text then sets the same as with the Han font alone. Supported in Chrome 87+ and Firefox 89+; Safari ignores them.
Traditional Chinese: Taiwan and Hong Kong
Traditional Chinese in “Target language” comes in two versions, Taiwan and Hong Kong. The export uses :is(:lang(…)) to cover the common ways of writing the language tag: the Taiwan version matches zh-Hant and zh-TW, the Hong Kong version matches zh-HK, zh-Hant-HK and the Macau tags. The reason is that :lang(zh-Hant) doesn’t match lang="zh-TW": browsers don’t infer the script from the region. Simplified Chinese likewise adds zh-CN and zh-SG.
Both regions differ from mainland China: punctuation sits in the center of the character body (in mainland China and Japan it sits at the lower left), and glyph shapes follow each region’s own standard. The tool measures the position of full-width punctuation and judges a font’s glyph region from its family name: if it doesn’t match the proof language, the character class table shows a warning; if it doesn’t match the target language, the export panel does. Fonts such as Source Han and Noto CJK, which contain glyphs for several regions in one file, switch by lang, so measurements are taken with the language set as well.
The character class table has a “Zhuyin” row that also covers the tone marks ˊ ˇ ˋ ˙: they sit at Latin-script code points, and unless they are moved over they are shown in the Western font. Accented letters in French and other languages (é, à) are separate code points and are not affected; if needed, you can move the tone marks back to Western under the gear icon.
App code (experimental)
iOS, Android and Flutter have no composite fonts. “App code” in the export generates Swift, Kotlin or Dart code that splits text into runs by character class and gives each run its own font, size and baseline shift; the character ranges are exactly the same as in the web export. The font names in the code (PostScript names, file names, family) are guesses; change them to match the fonts actually bundled with your app. Mixing text of different sizes changes the line height, and there is no line-height correction as on the web; Flutter can’t shift the baseline of individual runs. All three kinds of code have been compiled (Kotlin against the Android API, Flutter through analyze and test) and the splitting has been checked, but the typesetting has not been looked at on real devices. If you find a problem, please open a PR or issue on GitHub. If the font licenses allow it, bundling the generated font files with your app gives the most complete result.
Font files
The Font files tab turns the composite font into a real font (TTF, WOFF2, OTF, in any combination) for apps such as Figma, Keynote and Word that don’t support composite fonts. It follows the exported CSS one to one: from each rule’s font it takes only the characters that rule covers, scales them by the size, shifts them up or down by the baseline, and merges everything into one font; line metrics come from the Han base font. Generation runs in the browser (Pyodide + fontTools), and fonts are never uploaded to any server.
Source fonts: Google Fonts fonts are downloaded as complete files from the google/fonts repository, because the slices served by the web API have most OpenType features removed; uploaded fonts are used as is; installed fonts are read through the browser’s Local Font Access API (Chrome, Edge; requires permission). OTF fonts with CFF outlines are converted to TrueType curves (error no more than 1/1000 em), and from a font collection (TTC) only the face in use is taken. Only fonts under licenses that allow modification, such as OFL and Apache, can be merged without further checks; for fonts with an unclear license (including fonts that come with the system and commercial fonts), first make sure you have the right to modify them, and keep the generated files for your own use. Hinting is removed, which only affects small sizes on Windows. Browsers automatically add 1/8 em of space between CJK and Western text; other apps don’t.
Formats: merging works only on TrueType curves, so OTF is produced at the end by converting the merged result to CFF curves. The font library that runs in the browser (fontTools) can’t merge CID-keyed CFF, which Chinese and Japanese OTF fonts commonly use, and can’t put TrueType and CFF curves in the same font; Adobe AFDKO, which can merge CFF directly and produce CID-keyed OTF, is a C program and can’t run in the browser. So when a source font is CFF, it goes through a cubic → quadratic → cubic curve conversion (error no more than 1/1000 em, invisible in print), and the resulting OTF is not CID-keyed. Current apps handle it fine; a few older print workflows that require CID fonts may not accept it.
Why not font-size-adjust
font-size-adjust (two-value syntax supported in Chrome 127, Firefox 92 and Safari 17) can also even out sizes, but it applies to every font in the element: while it brings the Western text to the target cap height, the Han font is also scaled according to the metrics of its own built-in Latin letters. It also can’t assign fonts by character class, so it doesn’t solve which font the quotation marks belong to. More importantly, MDN notes that when it is used together with size-adjust in @font-face, size-adjust no longer has any effect. So don’t set font-size-adjust on elements that use a composite font. You can switch the proof to this approach under “Compare with other methods” to see the difference.
Native CSS properties for CJK typography
These properties don’t conflict with composite fonts and can be used together with them. The settings in the Text layout tab are written into the exported usage rule; alignment, justification method and paragraph wrapping belong to the page layout, so they are in the proof’s View menu, are only used for the preview, and are not exported. The table lists the version in which each browser started supporting the property, from MDN compatibility data as of October 2026.
| Property | What it does | Chrome / Edge | Firefox | Safari |
| text-autospace | Automatically adds 1/8 em between Han characters or kana and Latin letters or digits. Chrome supports only normal / no-autospace, and in testing its initial value is no-autospace (the spec says normal), so write it out explicitly. | 140 | 145 | 18.4 |
| text-spacing-trim | Punctuation compression: removes the space between adjacent full-width punctuation marks and sets opening brackets at the line head half-width. Only normal / space-all / space-first / trim-start are implemented so far. | 123 | — | — |
| word-break: auto-phrase | Breaks lines by phrase (文節) so a word isn’t split across two lines. Works only with lang="ja" and lang="ko". | 119 | — | Preview |
| line-break | Strictness of the line breaking rules: strict is more rigorous about keeping small kana, the prolonged sound mark and similar characters from the line head. | 58 | 69 | 11 |
| text-wrap: pretty | Avoids orphans: only one or two characters on the last line of a paragraph. Chrome adjusts only the last four lines of a paragraph; Safari reflows the whole paragraph, makes every line shorter, and disables hanging punctuation. | 117 | — | 26 |
| text-wrap: balance | Makes lines similar in length; suited to headings. | 114 | 121 | 17.5 |
| text-justify | How justified text is spaced: inter-character distributes the extra space between characters. | 145 | 55 | — |
| hanging-punctuation | Hangs punctuation outside the type area. In Safari, punctuation doesn’t hang when text-wrap is pretty. | — | — | 10 |
| text-box | Trims the half-leading above the first line and below the last line. Only Firefox supports the ideographic edges so far. | 133 | 154 | 18.2 |
| text-combine-upright: all | Sets horizontal-in-vertical text (tate-chu-yoko) in vertical writing; the digits must be wrapped in their own element. No browser implements the digits value. | 48 | 48 | 15.4 |
Sources: MDN text-autospace, text-spacing-trim, font-size-adjust, MDN browser-compat-data, Chrome: new CSS internationalization features.