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

Question

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

为了让这个项目看起来尽可能接近示例，我一直在尝试使用带有智慧字体的@font-face规则来使带有标签的标题具有智慧字体。我的课程建议使用 Mozilla Developer Docs 让 Wisdom Font 工作。我一直在使用 Mozilla Developer Docs @font-face page to help me and my coding course provided the Wisdom font in zip files. I downloaded the file and extracted all the contents. Once I downloaded the file, I followed the syntax in Mozilla Docs. However the font changed from Comic Sans to Arial. I downloaded the Wisdom font file again and played around with the syntax and changing the src url to see if that would help. However the font still remains on Arial. I emailed my teacher about the issue and she sent me another link. 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：您的 URL 中不应有任何空格。

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 应该引用没有 folder/URL 的字体名称，例如：

 font-family: 'WisdomScriptAIRegular';

这与您稍后在 CSS 中使用字体的名称相同，例如：

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

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

@font-face rule not working in codepen

html

css

fonts

webfonts

font-face