Question

我已使用@font-face在我的localhost页面样式上添加了自定义字体。我想使用特殊字体，它就像阿拉伯风格，它被称为“阿拉伯舞蹈”。

我上传了正确的字体并以页面样式附加：

<style>
@font-face {
    font-family: 'ShekuFont';
    url('https://www.dropbox.com/s/nwefiy37mw1y2or/arabdances-webfont.woff2?dl=0') format('woff2'),
    url('https://www.dropbox.com/s/ukkeetvypapov3j/arabdances-webfont.woff?dl=0') format('woff'),
    url('https://www.dropbox.com/s/5j8621m4sf73n75/ArabDances.ttf?dl=0') format('truetype');
}
.big-title {
  color: #fff;
  font-family: ShekuFont;
  font-size: 5em;
  font-weight: 900;
  text-shadow: 1px 1px 2px rgba(50, 50, 50, 0.59);
  text-transform: uppercase;
}
</style>

HTML：

<h1 class='big-title'>Making Test</h1>

毕竟，我可以看到使用另一种字体的一些区别，但它不是“满载”字体。它没有显示原始字体样式。有什么我需要添加，以便它可以显示原始的“阿拉伯风格”，而不是阿拉伯字体。我正在使用谷歌Chrome最新版本和附加的woff2，woff和truetype格式。

Answer 1

问题是链接指向DropBox页面（*.html页面，而不是*.ttf或*.woff2或*.woff文件），而不是实际的字体文件。因此，字体实际上并未加载。而是将字体文件下载到您的服务器上，并使用相对路径引用它们。

即，将字体文件下载到与HTML文件相同的目录中，然后使用此@font-face代码：

@font-face {
    font-family: 'ShekuFont';
    url('arabdances-webfont.woff2') format('woff2'),
    url('arabdances-webfont.woff') format('woff'),
    url('ArabDances.ttf') format('truetype');
}

HTML不会加载完整的自定义字体

1 个答案: