Question

我正在尝试使用URL将字体文件链接到p5.js草图，因此我可以将其上传到codepen.io，在那您需要付费才能上传文件。该文件是自定义文件，无法在Google字体上使用。

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

loadFont(url);

，但出现错误，表明找不到文件。我将文件上传到github和tinyupload，这是链接：

Github

TinyUpload

minimal, complete and verifiable example

Answer 1

Mike已经在评论中回答了，但我认为我会展开：

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

您需要养成观察自己的developer tools的习惯。这是出现错误和网络问题的地方。

如果您查看开发人员工具，则会看到此错误：

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。（除非您想将其用作代码编辑器。）

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

1 个答案: