用户指南 取消(C)

向网站添加字体

  1. Adobe Fonts 用户指南
  2. 简介
    1. 系统要求和订阅要求
    2. 浏览器和操作系统支持
    3. 在计算机上添加字体
    4. 向网站添加字体
    5. 在 CC 移动应用程序上添加字体
  3. 字体许可
    1. 字体许可
    2. 管理您的帐户
    3. 向 Creative Cloud 企业版客户授予许可
    4. 将字体许可证添加到您的帐户
    5. 从订阅库中删除字体
    6. Adobe Fonts 不适用于在中国注册的 Adobe ID
    7. 我的 Creative Cloud 订阅为何不包含这些字体?
    8. Morisawa 2021 年 9 月字体删除
  4. 获取和使用字体
    1. 在 Creative Cloud 应用程序中使用 Adobe Fonts
    2. 管理您的字体
    3. 在桌面应用程序中解析缺失字体
    4. 在 InDesign 中使用字体
    5. 字体和排版规则
    6. 在 HTML5 Canvas 文档中使用 Web 字体
    7. 在 InCopy 中使用字体
    8. 如何在 Adobe Muse 中使用字体
    9. 在 Muse 中使用 Web 字体
    10. 打包字体文件
    11. 故障排除指南:添加字体
    12. 添加的字体未显示在字体菜单上
    13. “无法添加一种或多种字体”或“已安装同名字体”
    14. 如果字体设计合作伙伴对我正在使用的字体进行了更新,会发生什么?
  5. Web 设计和开发
    1. 向网站添加字体
    2. 故障排除指南:向网站添加字体
    3. 在 HTML 电子邮件或新闻稿中使用 Web 字体
    4. 借助移动页面加速 (AMP) 使用 Web 字体
    5. CSS 选择器
    6. 使用字体显示设置自定义 Web 字体性能
    7. 嵌入代码
    8. 动态子集和 Web 字体服务
    9. 字体事件
    10. 为什么我的 Web 字体来自 use.typekit.net?
    11. 网站无法连接到 use.typekit.net
    12. 借助 CodePen 使用 Web 字体
    13. 浏览器和操作系统支持
    14. 在本地开发时使用 Web 字体
    15. 内容安全策略
    16. 打印 Web 字体
  6. 语言支持和 OpenType 功能
    1. 语言支持和子集
    2. 使用 OpenType 功能
    3. CSS 中的 OpenType 功能的语法
  7. 字体技术
    1. OpenType-SVG 颜色字体
    2. Ten Mincho:从版本 1.000 进行更新的要点

您可以在网站、HTML 电子邮件活动Google 的 AMP 格式的文章以及支持 Web 字体的其他类型的项目中使用 Adobe Fonts 中的 Web 字体。

 

选择要使用的字体

首先,您需要浏览字体库。您可以从“语言和书写系统”下拉菜单中选择所需的语言支持。

显示字体 Web 界面,并突出显示语言设置
选择语言和书写系统菜单以查看字体语言过滤器的菜单

添加标记或筛选条件来优化字体列表。使用我们的自然语言标记浏览适合您的项目风格的字体,或者可以按分类(例如衬线字体或无衬线字体)、属性(x 高度、宽度或粗细)或语言进行筛选。 

Adobe Fonts 标记浏览

创建 Web 项目

找到喜欢的字体后,请单击 </> 按钮将此字体系列添加到 Web 项目。

Gilbert 显示的字体图像带有突出显示的“添加系列”选项

您还可以单击字体名称以打开字体系列页面,并查看所有可用的字体粗细和样式。然后点击页面顶部的“</> 添加到 Web 项目”将此字体系列添加到 Web 项目。

从字体 Web 添加字体系列并选择样式和字体粗细

在“将字体添加到 Web 项目”窗口中,您可以命名 Web 项目并确定将包含哪些字体。

  1. 点击菜单,然后选择“创建新项目”。
  2. 为 Web 项目命名。
  3. 使用复选框选择要包括的字体粗细和样式。
  4. 创建项目。

您也可以稍后通过“管理字体”页面更改项目设置。

弹出窗口的图像,其中选择了用于将其从字体 Web 添加到新项目的字体

接下来,您会获得嵌入代码,以将字体加载到您的网站中。可在嵌入代码帮助页面查看不同选项说明,默认的嵌入代码对大多数项目都适用。

复制嵌入代码并将其添加到您网站中的 <head> 标签页。

字体的嵌入代码与字体样式一起显示在图像中

单击“完成”关闭 Web 项目窗口并继续浏览。要向您的项目添加更多字体,请点击另一字体系列的 </> 按钮,然后从菜单(而不是“创建新项目”)中选择您的项目名称。

自定义 Web 项目

您的 Web 项目以及您添加到其中的所有字体将列在“管理字体” 中。

单击“编辑项目”按钮以更改选用的字体粗细和样式,从项目中完全删除 Web 字体系列,或指定字体显示设置。您也可以在 Web 项目编辑器中更改指定项目支持语言的字符集。  

东亚字体必须与动态子集一起使用,而其他字体则具有基于语言的子设置选项:默认、所有字符或自定义语言子集。语言支持和子集帮助页面包含有关不同选项的更多信息。

您可以通过选中“OpenType 功能”框在项目中选用任何 OpenType 功能。选中此框还会显示该特定 Web 字体系列可用功能的列表,例如连字、替代字符或小写字母。

“字体显示”允许您指定如何在 Web 浏览器中加载 Web 字体并将其应用到您的网站。有关上述选项的详细信息,请参阅我们的字体显示设置帮助页面。

按照所需方式配置项目后,单击“保存更改”以保存项目。几分钟后,这些更新将可在您的网站上可用。

在 CSS 中应用字体

Web 项目页面列出了每种字体的 CSS 字体系列名称、数字粗细和字体样式。在 CSS 中使用这些字体系列名称以将字体应用于文本。

wp-page

 Adobe

更快、更轻松地获得帮助

新用户?

Adobe MAX 2024

Adobe MAX
创意大会

10 月 14 日至 16 日迈阿密海滩及线上

Adobe MAX

创意大会

10 月 14 日至 16 日迈阿密海滩及线上

Adobe MAX 2024

Adobe MAX
创意大会

10 月 14 日至 16 日迈阿密海滩及线上

Adobe MAX

创意大会

10 月 14 日至 16 日迈阿密海滩及线上