@ font-face规则无法在codepen

Question

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

为了使这个项目尽可能地与示例紧密相关，我一直在尝试使用带有Wisdom字体的@ 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网址代码吗？有什么提示吗？

Answer 1

问题＃1：您的网址中不应有空格。

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

问题＃2：就像img src一样，您的网络字体网址必须指向某个地方在线托管的真实资源。现在，它指向了一个fonts文件夹，我猜这个文件夹并不存在于CodePen域中。如果您有CodePen Pro帐户，可以通过资产区域（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;
}