用户指南 取消(C)

借助 CodePen 使用 Web 字体

  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. 在 Muse 中使用 Web 字体
    9. 打包字体文件
    10. 故障排除指南:添加字体
    11. 添加的字体未显示在字体菜单上
    12. “无法添加一种或多种字体”或“已安装同名字体”
    13. 如果字体设计合作伙伴对我正在使用的字体进行了更新,会发生什么?
  5. Web 设计和开发
    1. 向网站添加字体
    2. 故障排除指南:向网站添加字体
    3. 对字体问题进行故障诊断
    4. 在 HTML 电子邮件或新闻稿中使用 Web 字体
    5. 借助移动页面加速 (AMP) 使用 Web 字体
    6. CSS 选择器
    7. 使用字体显示设置自定义 Web 字体性能
    8. 嵌入代码
    9. 动态子集和 Web 字体服务
    10. 字体事件
    11. 为什么我的 Web 字体来自 use.typekit.net?
    12. 网站无法连接到 use.typekit.net
    13. 借助 CodePen 使用 Web 字体
    14. 浏览器和操作系统支持
    15. 在本地开发时使用 Web 字体
    16. 内容安全策略
    17. 打印 Web 字体
  6. 语言支持和 OpenType 功能
    1. 语言支持和子集
    2. 使用 OpenType 功能
    3. CSS 中的 OpenType 功能的语法
  7. 字体技术
    1. OpenType-SVG 颜色字体
    2. Ten Mincho:从版本 1.000 进行更新的要点

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 字体进行应用。

更快、更轻松地获得帮助

新用户?