如何在 ffonts.net 上使用 @font-face 更改字体

Question

我正在制作专用于 Playstation 的致敬页面，并且想使用我找到的网络字体。我一直在尝试使用 @font-face 属性来实现它，但我似乎做错了什么

https://css-tricks.com/snippets/css/using-font-face/ 这是我一直试图遵循的指南。 https://webfonts.ffonts.net/Slim-Play.font 这就是我假设的 webfont 服务器 link 但在这一点上我不确定。

@font-face {
  font-family: 'slimplay';
  src:  url('https://webfonts.ffonts.net/Slim-Play.woff2') format('woff2'),
        url('https://webfonts.ffonts.net/Slim-Play.woff') format('woff'),
        url('https://webfonts.ffonts.net/Slim-Play.tts') format('truetype');
}
h1 {
  color: blue;
  font-family: "slimplay";
}

我希望 font-family: "slimplay" 使其成为指定的字体，但在使用通用 h1 标签进行测试后，唯一出现的是蓝色。

Answer 1

您 @font-face 的格式没问题；我查看了您的字体链接，它们似乎无效。我的建议是在本地下载它们，然后上传到 file-hosting 站点（如 Dropbox）并用这些链接替换您当前的字体链接。 Here 是教程。

如果您决定使用 Dropbox，这里有一个示例：

@font-face {
  font-family: 'slimplay';
  src:  url('https://dl.dropbox.com/s/asdfghjkl/Slim-Play.woff2') format('woff2'),
        url('https://dl.dropbox.com/s/asdfghjkl/Slim-Play.woff') format('woff'),
        url('https://dl.dropbox.com/s/asdfghjkl/Slim-Play.ttf') format('truetype');
}

（并且您的 CSS 样式可以保持不变）

希望对您有所帮助

如何在 ffonts.net 上使用 @font-face 更改字体

How to change font using @font-face on ffonts.net

css

fonts

webfonts