javascript - 如何在 p5.js 中链接外部 .otf 文件

Question

我正在尝试使用 url 将字体文件链接到 p5.js 草图，以便我可以将其上传到 codepen.io，您必须付费才能上传文件。该文件在谷歌字体上不可用，因为它是自定义的。

我尝试将链接放在加载字体函数中，如下所示：

loadFont(url);

但出现一个错误，提示找不到该文件。我将文件上传到 github 和 tinyupload，链接如下：

Github

小上传

最小、完整和可验证的例子

Answer 1

迈克已经在评论中回答了，但我想我会扩展：

首先，您需要确保您使用的文件主机不会将您的文件隐藏在下载页面后面。通过使用https://github.com/Tudor0404/files/blob/master/matrix-code-nfi.otf?raw=true链接，您已经非常接近了，但您还有另一个问题。

您需要养成查看开发人员工具的习惯。这是出现错误和网络问题的地方。

如果你查看你的开发者工具，你会看到这个错误：

Access to XMLHttpRequest at 
'https://github.com/Tudor0404/files/blob/master/matrix-code-nfi.otf?raw=true' 
from origin 'https://s.codepen.io'
has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

您收到 CORS 错误（这是开始 google 搜索的好地方），这基本上意味着您的文件主机（在本例中为 GitHub）不允许访问来自其他域（在本例中为 CodePen）的文件。

据我了解，您不应该像这样直接链接到 GitHub 存储库中的文件。如果你需要托管它们，你可以使用GitHub Pages之类的东西。（GitHub Pages 默认允许 CORS）。

当然，如果您正在设置 GitHub Pages，那么您可以使用它来托管您的 P5.js 草图，您将不再需要 CodePen。（除非您想将其用作代码编辑器。）