向网站添加字体

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

 

选择要使用的字体

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

Adobe Fonts 浏览页面

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

Adobe Fonts 标记浏览

创建 Web 项目

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

从字体卡创建 Web 项目

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

从字体系列页面添加一个新的 Web 字体。

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

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

您也可以稍后通过我的 Adobe Fonts 页面更改项目设置。

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

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

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

自定义 Web 项目

您的 Web 项目以及您添加到其中的所有字体将列在我的 Adobe Fonts 中。

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

wp-page

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

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

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

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

在 CSS 中应用字体

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

wp-page

Adobe 徽标

登录到您的帐户