css - 如何在 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 服务器链接，但此时我不确定。

@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 的格式没问题；我查看了您的字体链接，它们似乎无效。我的建议是在本地下载它们，然后上传到文件托管站点(如 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 样式可以保持不变)

希望对你有帮助