创建网页字体套件
选择 TTF、OTF、WOFF 或 WOFF2 字体,以创建 WOFF2 文件、CSS 和 HTML 预览。在集成到网站之前,请检查示例文本以及 CSS 中的名称、字重、样式和加载时的显示方式,然后将套件保存为 ZIP。不会对子集字符进行处理。
可执行的操作
为网页打包文件
从 TTF、OTF、WOFF 或 WOFF2 创建 WOFF2、CSS 和 HTML 预览。可以一次选择多个字体。
检查字形和 CSS 设置
检查转换后的字体显示效果。可按需更改网页中使用的名称、字重和样式,以及加载时的显示方式。
将整套文件保存为 ZIP
将 fonts 文件夹、fonts.css 和 preview.html 作为一套文件保存。使用时请保留它们之间的相对位置。
使用方法
一起选择字体
选择可用于网页的字体。使用多个字体时,请一起选择。
检查显示效果和网页设置
输入预览文本并检查每种字体。如需调整名称、字重或其他选项,请打开该字体的 CSS 设置。
创建套件并保存 ZIP
点击“创建网页字体套件”,并保存生成的 webfont-kit.zip。
解压文件并添加到网页
解压文件时,请保留 fonts 文件夹、fonts.css 和 preview.html 的相对位置。在使用字体的页面中加载 CSS,并使用指定的字体名称。
适用场景
准备发布网站
将字体打包为网页格式并生成 CSS,为集成准备所需文件。
向制作团队交付完整套件
将常规和粗体等多个字体打包,并附上包含示例文本的 HTML,方便检查。
字体与 CSS 的配合方式
WOFF2 是适用于网页的字体格式
准备包含原有字符的 WOFF2 字体。字符不会经过子集化。文件大小因字体而异。
在 CSS 中注册名称、字重和样式
这些设置决定网页中哪些请求样式会使用此字体,不会将字体字形修改为粗体或斜体。
按字重和样式区分同名字体
常规和粗体样式可以使用相同名称,但名称、字重和样式的组合不能重复。
选择加载时的显示方式
默认情况下,加载时会先显示回退字体,待目标字体就绪后再切换。如有需要,可在 CSS 设置中更改等待和切换方式。
保留文件的相对位置
fonts.css 会引用 fonts/font-1.woff2 等文件。如果移动文件夹或 CSS,请相应调整引用路径。
常见问题
应将生成的文件放在哪里?
解压 ZIP,并按原有相对位置放置 fonts 文件夹、fonts.css 和 preview.html。在页面中加载 fonts.css,并在 CSS 中使用指定的字体名称。
这与单纯转换格式有什么区别?
此页面会将 WOFF2、CSS 和 HTML 预览打包在一起。如果只想更改字体格式,请使用“字体格式转换器”。
可以只保留我使用的字符吗?
此页面不会对字符进行子集化。它会生成保留原有字符的字体。
更改字重会让字符变粗吗?
此设置指定 CSS 中使用的字重值,不会修改字体文件中的字形。要使用粗体或斜体,请提供包含这些字形的文件。
可以使用多个同名字体文件吗?
您可以注册字重或样式不同的文件。如果名称、字重和样式的组合重复,请检查相关设置。
重新选择字体时会怎样?
当前字体集和生成的 ZIP 会被移除,并加载新选择的字体集。要继续一起使用的文件,请与新文件一并选择。
如果有些示例字符没有显示怎么办?
字体中不包含的字符可能会使用其他字体显示。请检查字体支持的字符,以及它们在实际使用位置的显示效果。
如果字体无法加载怎么办?
请重新选择受支持格式的字体。如果字体集中的任何文件无法转换或加载,就不会保存部分成功的字体集。
输入和结果
- 输入
- TTF、OTF、WOFF 和 WOFF2。可以一次选择多个文件。
- 使用条件
- 请检查输入字体的使用条款,包括网页嵌入相关条款。
- 设置
- CSS 中使用的名称、字重、样式和加载时的显示方式。
- 输出
- webfont-kit.zip。包含 WOFF2、fonts.css 和 preview.html。