Toollet
按任务或应用名称搜索搜索联系我们
价格

创建网页字体套件

选择 TTF、OTF、WOFF 或 WOFF2 字体,以创建 WOFF2 文件、CSS 和 HTML 预览。在集成到网站之前,请检查示例文本以及 CSS 中的名称、字重、样式和加载时的显示方式,然后将套件保存为 ZIP。不会对子集字符进行处理。

TTF · OTF · WOFF · WOFF2

可执行的操作

为网页打包文件

从 TTF、OTF、WOFF 或 WOFF2 创建 WOFF2、CSS 和 HTML 预览。可以一次选择多个字体。

检查字形和 CSS 设置

检查转换后的字体显示效果。可按需更改网页中使用的名称、字重和样式,以及加载时的显示方式。

将整套文件保存为 ZIP

将 fonts 文件夹、fonts.css 和 preview.html 作为一套文件保存。使用时请保留它们之间的相对位置。

使用方法

  1. 一起选择字体

    选择可用于网页的字体。使用多个字体时,请一起选择。

  2. 检查显示效果和网页设置

    输入预览文本并检查每种字体。如需调整名称、字重或其他选项,请打开该字体的 CSS 设置。

  3. 创建套件并保存 ZIP

    点击“创建网页字体套件”,并保存生成的 webfont-kit.zip。

  4. 解压文件并添加到网页

    解压文件时,请保留 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。

当前设置

搜索工具