无论我尝试什么，@ Font-face都无法正常工作

Question

是的......这里有很多问题，我是一名新手网络开发人员，在我自己的时间里做了很少的实验。

我正在尝试使用CSS @ font-face属性，但是CLUELESS为什么它不起作用。我根本无法做任何事情才能让它发挥作用。而且我已经遍布Stack Overflow，W3Schools，MDN等等 - 无论我改变和改变多少想法“它现在可能会起作用”这是不可能的。

我的代码：

我的结果：

有没有人知道我做错了什么？我已经尝试过WOFF和WOFF2，改变了CSS中目录的语法，我使用了Edge，Firefox和Chrome。所有这些我都更新到了他们的最新版本。

Answer 1

无法确认，但有些事情要尝试：

1. 从<style>标记内删除评论。这是CSS文件中的HTML注释，可能会混淆浏览器。如果您确实需要该评论，请将其放在<style> tage。
之前
2. 在@font-face url中，使用正斜杠/，而不是反斜杠\。正斜杠是路径和URL的标准，只有Windows使用反斜杠。
3. 同样在url中，前导斜杠（fonts之前的斜杠）仅在您的网站位于服务器的根目录中时才有效，例如如果您的网站位于http://example.com/index.html且您的字体位于http://example.com/fonts。它可能不适合你的情况，因为我怀疑你是从文件系统服务。因此，如果index.html位于fonts目录旁边，请使用url("fonts/gotham_bold.ttf"。
4. 如果您确实在为网页文件系统提供服务，请考虑使用虚拟服务器。 XAMPP安装非常简单，并且很好地了解Apache，它仍然是一种流行的服务器软件。