使用托管字体还是已有字体文件?
托管家族可在 Google Fonts 配对实验室比较;已有文件先检查元数据。配对卡中填写家族名不会自动加载字体文件。
Elysia Tools
导航
Workflow Playbook
检查字体字形覆盖,用真实文案比较标题与正文字体,配置可变轴和响应式字号,并验收上线后的字体加载与回退表现。
专题
这个流程面向为一个多语言页面交付排版规范的前端开发者和设计师。准备一条较长标题、一段正文、金额和数字、带变音符号的姓名,以及各语言实际使用的标点,再选择字体。已有文件先交给 font-file-inspector,把文件版本、所需字重和覆盖报告一起保存。Unicode 区块覆盖只能帮助盘点,不能保证文案中的每个字形或塑形序列都正确。另行确认允许的字体部署方式,并记录批准的来源。遇到不可见字符或异常码点时,使用 unicode-emoji-debugging 检查原文。
若候选在实验室的 Google Fonts 清单内,使用 webfont-pairing-lab 加载对应家族,比较标题与正文并导出所选字重的托管导入片段。已有字体或站点字体栈可以用 font-pairing-preview-card,但宿主必须先加载实际文件。填写家族名不会触发下载,看起来合适的卡片可能显示的是本机回退。验收前应在目标页面确认实际渲染字体。比较时固定文案,只调整字重、字号与行高,并用长标题暴露过紧断行。
检查发现 fvar 轴后,再使用 variable-font-axis-instance-and-css-font-variation-settings-builder 比较命名实例和范围内坐标。若高层 CSS 属性已经能表达需要的设置,可采用工具给出的对应属性。预览资源引用必须换成实际部署的字体地址,并重新测试该文件。静态家族则记录每种角色对应的字重文件,不要把浏览器合成的粗体当作目标字重已加载的证明。字体身份、字体栈和坐标一起保存,才能让接手开发者复现。
用 css-fluid-typography-clamp-calc 计算约定视口之间的最小和最大字号,应用到真实页面,再检查两个端点及一个中间宽度。提高浏览器缩放、禁用字体加载,观察回退断行、按钮标签与被裁切的文本。字号公式本身不能证明重排可读。最终交付 CSS、资源来源、语言样本、已测视口和待处理缺陷。若问题在选择器覆盖或布局规则,进入 css-authoring-layout-and-cascade-workflows;更完整的页面无障碍检查交给 web-accessibility-audits。
工作流指南
查看上传字体的元数据、Unicode 覆盖、样式标记和可变轴,对照真实文案列出需要回退的字符。
对托管家族使用字体实验室,对已加载的 CSS 字体栈使用配对卡;保持文案一致,比较字重、字号与行高。
检查命名实例和轴范围,预览选定坐标并导出 CSS;静态字体保留明确字重文件,跳过轴配置。
按约定视口计算 clamp 范围,应用到页面后手动核对实际字体加载、断行、缩放和回退表现。
托管家族可在 Google Fonts 配对实验室比较;已有文件先检查元数据。配对卡中填写家族名不会自动加载字体文件。
只有检查发现 fvar 轴才使用轴构建器;静态字体应选择正确字重文件,不能靠填写轴参数变成可变字体。
先检查覆盖和实际回退字形;若出现异常码点,转到 unicode-emoji-debugging 检查文本再决定是否换字体。