Question

是否可以在像codepen.io这样的应用程序中使用@ font-face？

我试图在我的codepen中使用github中的字体。但是字体不会加载。

https://github.com/TypeNetwork/Decovar/blob/master/fonts/DecovarAlpha-VF.ttf

@font-face {
  font-family: "Decovar";
  src: url('https://github.com/TypeNetwork/Decovar/blob/master/fonts/DecovarAlpha-VF.ttf') format('truetype');
}

body {
  font-family: "Decovar";
}

更新:: 正如所指出的，从github加载字体存在CORS问题。但我真的不明白为什么我可以使用加载定义字体系列的CSS样式表的链接。但我无法编写自己的样式表来包含字体。一个人比另一个人更安全吗？

<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/decovar" type="text/css"/>

@font-face {
font-family: 'DecovarRegular24';
    src: url('/assets/fonts/decovar/434ee108e46e353c9914966b169d781b/b6a2e38c243d4f16ad98d2ca3d6cdc24/DecovarRegular24.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

我确实在Mozilla找到了这个解释。

此跨源共享标准用于启用跨站点HTTP请求：... Web字体（用于CSS中的@ font-face中的跨域字体使用），以便服务器可以部署可以使用的TrueType字体只允许跨站点加载并被允许这样做的网站使用。

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

正如@jacob goh所指出的那样。原因不在于安全性。这是因为：

Github不是文件托管网站，也不允许人们使用它。

Answer 1

@ font-face不是问题。问题是您加载的字体文件。

如果文件托管服务器具有正确的设置，则不会发生CORS问题。

Github不是文件托管网站，也不允许人们使用它。

但是有一个名为Rawgit的免费服务可以帮助解决这个问题。

https://codepen.io/jacobgoh101/pen/YeWOay

@font-face {
  font-family: "Decovar";
  src: url('https://cdn.rawgit.com/TypeNetwork/Decovar/620fb4ea/fonts/DecovarAlpha-VF.ttf') format('truetype');
}

body {
  font-family: "Decovar";
}

在codepen中使用@ font-face

1 个答案: