Question

下载了要在Creative Market中使用的网络字体并尝试实施，但似乎无法正常工作（使用Chrome但也检查Safari）。

编辑：已经测试了完整的URL，所以字体肯定在正确的位置。网站的网址：https://helloarchie.co/

这些文件位于同一个CSS文件中，位于顶部：

@font-face {
  font-family: 'TP';
  src: url('Think-Pink-Regular.woff') format('woff'), /* Modern Browsers */;
  src: url('Think-Pink-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
}

而且：

h6.categor-y3 {
  text-align: center;
  font-size: 0.6em; 
  letter-spacing: 2px; 
  font-family: 'TP', Arial, sans-serif;
}

字体肯定在与CSS相同的文件夹中，并且命名正确。

Answer 1

字体与CSS位于同一文件夹中。因此，您的相对路径是正确的。但是，由于CORS (Cross-Origin Resource Sharing)政策问题，无法加载字体。

您的网站的主机名是helloarchie.co，而CSS是从helloarchie-helloarchie.netdna-ssl.com加载的，字体也是如此。

现在您有几种方法可以解决这个问题：

如果您有权访问helloarchie-helloarchie.netdna-ssl.com的网络服务器，则可以添加CORS策略规则以允许共享字体。请参阅 Here ）。
如果您无法访问网络服务器，最简单的解决方案是将字体移至helloarchie.co并从那里调用。

努力让@ font-face自定义webfont正常工作

1 个答案: