网页字体生成器

将字体文件与即用型 CSS 和 HTML 预览页面打包在一起。

交互式工作空间更改保留在此设备上
字体文件
CSS 字体系列名称
捆绑内容
    选定的字体出现在此处。

    该套件包括浏览器就绪的字体文件、@font-face CSS、预览和设置说明。

    默认为私有您的输入和文件将在此设备上处理。
    免费且即时无需帐户、队列或软件安装。
    准备使用结果生成后立即复制或下载。

    如何使用 网页字体生成器

    通过三个简单的步骤即可获得可靠的结果。

    1. 01

      选择字体文件

      添加一个或多个许可的浏览器兼容字体文件。

    2. 02

      Set the family name

      使用应出现在整个样式表中的 CSS 名称。

    3. 03

      下载套件

      接收包含字体、@font-face CSS、预览 HTML 和设置说明的 ZIP。

    专为日常工作而打造

    无需繁琐工作即可有用

    集中控制、即时反馈,您和结果之间没有任何关系。

    完整的文件夹结构

    生成的 URL 与包含的字体目录相匹配。

    多种重量

    将一系列字体文件打包到一个可部署套件中。

    预览页面

    打开包含的 HTML 文件以验证加载和示例字形。

    实用指南

    什么是 网页字体生成器?

    Webfont 工具包将浏览器可加载字体文件与 @font-face CSS 相结合,命名字体系列、源格式、样式、粗细和加载行为。将这些部分放在一起可以防止部署期间字体 URL 损坏。

    该生成器打包现有的 TTF、OTF、WOFF 和 WOFF2 文件;它不会改变字形轮廓或创建转换后的格式。当您已经拥有许可副本时,WOFF2 通常是最佳交付格式。

    实际应用

    何时使用此工具

    常用方式 网页字体生成器 适合实际项目和日常任务。

    1

    Self-hosted typography

    无需依赖第三方 CDN 即可部署品牌字体。

    2

    设计系统

    为应用程序团队创建一致的入门包。

    3

    字体质量检查

    预览文件并确认其系列配置。

    4

    线下项目

    用于本地接口和文档的捆绑类型资产。

    有用的答案

    常见问题

    关于的快速解答 网页字体生成器 以及该页面的工作原理。

    这会将 TTF 转换为 WOFF2 吗?

    不会。它会将您提供的浏览器兼容文件与 CSS 和预览打包在一起。

    Which format is best for websites?

    WOFF2 通常提供最好的现代 Web 压缩,并根据兼容性需求使用其他格式。

    我可以包含多个重量吗?

    是的。文件在起始 CSS 中分配了渐进权重值,您可以调整该值以匹配实际的系列。

    每种字体都可以自托管吗?

    不可以。在分发或嵌入字体之前,请检查该字体的许可证。