上次更新日期:
2021年4月29日
- Adobe Fonts 用户指南
- 简介
- 字体许可
- 获取和使用字体
- Web 设计和开发
- 语言支持和 OpenType 功能
- 字体技术
CodePen 是基于 Web 的 HTML、CSS 和 JavaScript 代码编辑器,使您可以直接在浏览器中试用代码。您可以直接在笔中使用自定义 Web 字体。
选择要使用的字体
按照 Web 字体教程选择一些字体并创建 Web 项目。
将嵌入代码添加到 Pen 中
可以在 HTML 编辑器的“设置”菜单或“CSS > 添加外部 CSS”菜单的“<head> 的内容”字段中将嵌入代码添加到 CodePen UI
要找到项目的嵌入代码,请访问 Web 项目页面并找到项目名称。复制该项目的默认 CSS 嵌入代码并粘贴到这些位置之一。
在 CSS 中应用字体
现在,您可以在笔的 CSS 编辑器中使用字体系列名称,您可以立即在实时视图中看到这些字体。
该 Web 项目中还列出了 CSS 中使用的字体系列名称;阅读有关在 CSS 中使用字体的更多信息。
分叉笔
公共笔可以分叉,以允许其他用户基于您的代码进行构建。Web 字体也可以在分叉的笔中使用。
删除项目或取消订阅
如果删除 CodePen 中正在使用的项目或取消您的订阅,则不再向所有使用该嵌入代码的笔提供这些字体。这包括您的原始笔,以及从中分叉的所有笔。CSS 中指定的后备字体将代替自定义 Web 字体进行应用。