借助 CodePen 使用 Web 字体

CodePen 是基于 Web 的 HTML、CSS 和 JavaScript 代码编辑器,使您可以直接在浏览器中试用代码。您可以直接在笔中使用自定义 Web 字体

选择要使用的字体

按照 Web 字体教程选择一些字体并创建 Web 项目。

将嵌入代码添加到 Pen 中

可以在 HTML 编辑器的“设置”菜单“CSS > 添加外部 CSS”菜单的“<head> 的内容”字段中将嵌入代码添加到 CodePen UI

要找到项目的嵌入代码,请访问 Web 项目页面并找到项目名称。复制该项目的默认 CSS 嵌入代码并粘贴到这些位置之一。

通过默认 CSS 嵌入代码来使用 CodePen

通过直接链接 CSS 文件来使用 CodePen

在 CSS 中应用字体

现在,您可以在笔的 CSS 编辑器中使用字体系列名称,您可以立即在实时视图中看到这些字体。

应用了 Web 字体的 CodePen 编辑器

该 Web 项目中还列出了 CSS 中使用的字体系列名称;阅读有关在 CSS 中使用字体的更多信息。

Web 项目页面中的 CSS 信息

分叉笔

公共笔可以分叉,以允许其他用户基于您的代码进行构建。Web 字体也可以在分叉的笔中使用。

删除项目或取消订阅

如果删除 CodePen 中正在使用的项目或取消您的订阅,则不再向所有使用该嵌入代码的笔提供这些字体。这包括您的原始笔,以及从中分叉的所有笔。CSS 中指定的后备字体将代替自定义 Web 字体进行应用。

Adobe 徽标

登录到您的帐户