@font-face 规则在 codepen 中不起作用

Question

我正在为我的编码课程重新创建电子邮件注册页面。这是我想重新创建的示例：

为了让这个项目尽可能地接近示例，我一直在尝试使用带有智慧字体的@font-face 规则来获得带有智慧字体的标签的标题。我的课程建议使用 Mozilla Developer Docs 来让 Wisdom Font 工作。我一直在使用Mozilla Developer Docs @font-face page 来帮助我，我的编码课程在 zip 文件中提供了 Wisdom 字体。我下载了文件并提取了所有内容。下载文件后，我遵循 Mozilla Docs 中的语法。然而，字体从 Comic Sans 更改为 Arial。我再次下载了 Wisdom 字体文件并尝试了语法并更改了 src url 以查看是否有帮助。但是字体仍然保留在 Arial 上。我就这个问题给我的老师发了电子邮件，她给我发了另一个链接。 My teacher's link 有 @font-face 工具包生成器，我用它来获取计算机上的文件格式。使用该工具包后，我遵循了基本和交叉兼容性的示例语法。但是字体仍然保持不变。

现在我网站上的@font-face 代码如下所示：

@font-face {
font-family: 'fonts/WisdomScriptAIRegular';
src: url('fonts/ wisdom_script-webfont.eot');
src: url('fonts/ wisdom_script-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/ wisdom_script-webfont.woff') format('woff'),
url('fonts/ wisdom_script-webfont.ttf') format('truetype'),
url('fonts/ wisdom_script-webfont.svg#WisdomScriptAIRegular') format('svg');
font-weight: normal;
font-style: normal;
}

这是我的email sign up code so far，它显示了它的外观。我是否为我的代码使用了错误的 src url？有什么建议吗？

Answer 1

问题 #1：您的网址中不应包含任何空格。

src: url('fonts/wisdom_script-webfont.eot');

问题 #2：很像 img src，您的网络字体 URL 必须指向某处在线托管的真实资源。现在，它指向 fonts 文件夹，我猜 CodePen 域中不存在该文件夹。如果您有 CodePen Pro 帐户，您可以通过 Assets 区域 (https://blog.codepen.io/documentation/pro-features/asset-hosting/) 上传字体文件；否则，您需要将字体文件放到其他地方并指向该 URL。

问题 #3：您的 font-family 应引用字体名称，但不包含文件夹/URL，例如：

 font-family: 'WisdomScriptAIRegular';

这也是您稍后应该在 CSS 中使用的相同名称以使用该字体，例如：

.recent_posts{
   font-family: 'WisdomScriptAIRegular', Arial, sans-serif;
}