html - 将 OTF 字体添加到网页

Question

我正在尝试创建一个带有 github 页面的网站，并且我想包含一个 otf 字体。我无法让它正常工作，而且我不确定我哪里出错了。

我做了一些研究，发现我需要使用@font-face，但我无法弄清楚它应该如何工作。在我发现的大多数其他解决方案中，我看到人们使用谷歌来托管他们的字体或类似的东西，但我更愿意将字体托管在我的 github 页面网站上。到目前为止，我已经下载了 otf 字体并将其添加到我的站点存储库中，并且我尝试遵循其他一些指南，但没有运气。

目前我的站点存储库包含字体文件和 index.html 文件。

这是我的字体的css：

@font-face {
   font-family: MagnoliaScript;
   src: url("magnolia-script.otf") format("opentype");
}

在这里，我试图将我添加到标题的字体分配给：

<h1 face=MagnoliaScript>text</h1>

我按照我在网上找到的内容进行了操作，但我一定遗漏了一些东西，因为字体保持不变。

标签： htmlcssgithub-pages

Answer 1

在这里请尝试替换此代码段

<h1 face=MagnoliaScript>text</h1>

这个在这里：

<h1 style="font-family:MagnoliaScript;">text</h1>

我希望这有帮助。