使用 Google、自定义与 Adobe 字体

确认字体来源与字重,按页面类型接入,并从访客设备检查实际加载。

Share

先确认来源与使用条件

设计软件中看得到字体,不代表网页访客能加载它。需要确认字体来源、实际使用字重与网页使用条件。先在选择字体中查找 Google 字体;需要自定义文件时,确认有适合网页使用的文件及授权,再上传。

字体的显示名、本机名与网页字体名可能不同。不要仅在提示词里写一个名称就认为已经接入;生成或导入后仍应检查缺失字体,并核对页面实际使用的字重。

添加 Google 或自定义字体

在资源的字体区域打开选择字体,搜索需要的 Google 字体并应用,无需先下载再上传。没有合适字体时,可使用允许网页嵌入的自定义文件,上传后核对字体名、字重和预览。当前上传格式包括 ttf、otf、woff、woff2,单个文件上限为 20 MB。

常规字重不能自动替代缺失的粗体文件。按字体检查提示补齐实际使用的字重,或明确替换为可用字体;不要用任意字体文件冒充另一字重。

Adobe Fonts 按 Kit 接入

支持专用入口的 Figma/PSD 导入页,可在资源的 Adobe 字体中添加网页项目的 JavaScript 嵌入代码,检测字体后确认添加。当前专用入口支持日文 Kit,一页使用一个 Kit;需要多款字体时在同一网页项目中准备。

不要只粘贴 Kit ID,也不要把 CSS 版本代码当成 JavaScript Kit。检测后核对字重与实际字体名,名称不匹配时通过字体检查或文字工具条手动选择对应字体。

没有专用入口时检查脚本方式

HTML 导入页或未提供专用入口的页面,可按适用方式在资源的 Head 脚本中使用字体服务嵌入代码。此时编辑器可能只把它当普通脚本,画布或字体清单不一定能反映字体状态,应通过预览或公开地址确认。

同一份 Kit 不要在专用入口和 Head 脚本重复添加。其他字体服务还可能有域名登记条件,需核对预览域名与发布域名,并由服务的账号负责人确认使用条件。

字体缺失、粗细不对与突然回退

从页面检查中的字体检查定位缺失字体和字重,补齐文件或替换。Adobe 没有检测到字体时,检查是否为 JavaScript 代码、网页项目中是否有字体、是否为支持的 Kit;字体名不匹配时手动替换。粗细不对先看 Kit 是否包含该字重。

线上突然回退还应检查外部服务项目和账号状态。不要看到回退就反复重新生成页面,字体加载来源失效时重排页面通常无助于解决问题。

Adobe Kit 被改动或只显示部分字重

提示嵌入代码被改动、未加载时,先从 Adobe 网页项目取得原始 JavaScript 嵌入代码,移除页面中旧 Kit 后重新添加。不要让 AI 改写 Kit 内容来绕过检测。补充字重后也需要让页面重新检测;如果界面只提供固定的一档可变字体字重,不应假定滑块可以调出所有粗细。

只有部分文字不对时,检查这些文字是否使用了不同的内部字体名,逐处或通过字体检查替换。日文云字体首次加载可能短暂切换字形,少选不必要字重可以减少负担,但应在实际设备与网络下验证。持续回退则检查 Kit、服务账号和字体项目,而不是简单忽略警告。

找不到同事字体或上传重复时

字体库按 Profile 管理,先确认自己与同事是否处于同一 Profile。页面已引用的字体资源和可以选择的上传字体库也需要分开检查,不能仅凭别人电脑上能显示就认定库中已经存在。

如果相同字体家族与字重已经存在,选择已有字体,不要改文件名反复上传。上传提示解析失败时检查文件是否完整、格式是否受支持、单文件是否超过 20 MB,并从授权来源取得正确文件。把扩展名改成 woff 不会转换真实格式。

名称不匹配与移除后再次出现

字体文件的内部家族名可能与设计稿显示名不同,空格、连字符、Pro、Std 等差异都值得核对。已上传却仍提示缺失时,通过文字工具条或字体检查选择正确家族与字重,而不只改变文件名。

从当前页面移除字体绑定,不等于删除整个 Profile 字体库。若页面文字仍引用它,重新打开时可能再次带入。需要彻底替换时,先替换页面中全部相关引用,再移除绑定,最后检查预览与发布结果;不要删除仍被其他页面需要的资源来解决单页问题。

从访客视角检查与交付

用没有安装该字体的设备打开预览和正式地址,核对日文汉字、标点、粗体、换行与按钮宽度。导出时区分打包字体与仍依赖云服务的字体,不承诺所有字体都成为离线文件。Logo 或装饰文字改成图像后仍需确认素材使用条件,并注意它不能像文字一样复制、搜索或自动换行。