跳到主要内容
项目详情

Webfont generator 是一个面向网页开发者的在线字体转换工具,用于把电脑中的字体文件转换为网页可使用的字体资源。它围绕 CSS 的 @font-face 规则工作:网页开发者可以提供自己的在线字体,让网页显示指定字体,而不必依赖用户电脑上已经安装的有限字体。工具支持拖放或浏览方式上传字体,完成转换后可下载包含转换字体、CSS 样式和演示页面的 ZIP 压缩包。与只提供单一格式转换的工具相比,它还提供输出格式、字体提示、字符子集、Base64 编码、字体显示策略和演示页面语言等设置。

核心功能

多种字体文件上传

工具支持通过拖放区域或文件浏览器选择字体文件。可上传的输入格式包括 TTF、OTF、WOFF、WOFF2、SVG、TTC、DFONT、BIN、CFF、PFA、PFB、PS、PT3、SFD、T11 和 T42。每个文件大小限制为 5 MB,单次最多上传 20 个文件;选择文件后点击 Convert 即可开始转换。

输出网页字体格式

转换设置中可以选择 TTF、EOT、WOFF、WOFF2 和 SVG 等输出格式。工具会根据选定的格式生成转换后的字体资源,并在下载内容中同时提供 CSS 样式。输出格式设置旁提供了 “Learn more” 链接,用于了解相关格式信息。

@font-face CSS 与网页资源打包

工具的用途建立在 CSS 的 @font-face 规则之上。该规则允许网页开发者指定在线字体来显示网页文本,也支持作者提供自己的字体,从而减少对用户本机已安装字体的依赖。转换完成后,用户可以下载 ZIP 压缩包,其中包含转换后的字体、CSS 样式以及演示页面。

字体转换与兼容性设置

Conversion settings 中提供 Family support、Fix vertical metrics 和 Add local rule 等选项,可用于调整字体族支持、修正垂直度量以及添加本地字体规则。工具还支持 Base64 encode,可将相关内容进行 Base64 编码。字体提示部分可以选择保留现有 TTFAutohint、使用 Strip hinting,或不改变现有提示设置。

子集、显示策略与演示页面

工具提供 Subsets 设置,可选择 All、Characters 或 Unicode ranges,用于指定字体子集范围。Font display 设置包含 auto、block、swap、fallback 和 optional 等选项。生成的演示页面还可以选择 English、French、Georgian、German、Portuguese 或 Russian 等语言。

使用方式

打开工具后,在 Upload your fonts 区域拖放字体文件,或通过 browse files 选择本地字体,然后点击 Convert。转换设置可以在操作前调整,包括输出格式、字体提示、Base64 编码、子集和字体显示策略等。完成后下载 ZIP 压缩包,压缩包内包含转换字体、CSS 样式和演示页面。官网正文没有提到注册、客户端、浏览器插件、命令行或 API,也没有要求用户自备模型 Key。

适用人群与场景

网页开发者可以使用它把自己的字体转换成网页资源,并配合 @font-face CSS 规则在网页中显示。需要向网页提供 TTF、EOT、WOFF、WOFF2 或 SVG 等字体格式的用户,可以在转换时选择对应输出格式。需要控制字体子集、Unicode ranges、Base64 编码或 font-display 行为的用户,也可以使用对应的转换设置。需要快速查看字体网页效果的用户,可以下载工具生成的演示页面。

注意事项

单个上传文件大小限制为 5 MB,单次最多上传 20 个文件。官网正文列出了支持的输入和输出格式,但没有提供价格、免费额度、注册要求或数据处理政策等信息。

多格式字体上传支持上传 TTF、OTF、WOFF、WOFF2、SVG 等多种字体文件,单文件不超过 5 MB,最多 20 个文件。
网页字体格式转换可将字体转换并输出为 TTF、EOT、WOFF、WOFF2 或 SVG 格式。
生成 CSS 与演示页面转换后可下载包含转换字体、CSS 样式和演示页面的 ZIP 压缩包。
字体转换设置提供 Family support、Fix vertical metrics、Add local rule、Base64 encode 和字体提示设置。
子集与显示策略支持选择字体子集、Unicode ranges、font-display 选项以及演示页面语言。

用户评论 (0)

还没有用户评论

成为第一个分享使用体验的人

查看更多

Webfont generator 截图

官网首页截图

写评论

分享你的使用体验,至少 10 个字。评论可以发多条,打分在右侧卡片单独进行。

还需 10 个字 · 0 / 500