在 codepen 中使用@font-face

Question

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

我试图在我的代码笔中使用来自 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 问题。但我真的不明白为什么我可以使用 link 来加载定义字体系列的 CSS 样式 sheet。但是我不能写自己的样式 sheet 来包含字体。一个比另一个更安全？

<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 找到了这个解释。

This cross-origin sharing standard is used to enable cross-site HTTP requests for: ...Web Fonts (for cross-domain font usage in @font-face within CSS), so that servers can deploy TrueType fonts that can only be cross-site loaded and used by web sites that are permitted to do so.

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

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

Github is not a file hosting site and does not allow people to use it as such.

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

using @font-face in codepen

css

font-face