如何 link p5.js 中的外部 .otf 文件

How to link an external .otf file in p5.js

我正在尝试 link 一个字体文件到 p5.js 草图,使用 url 这样我就可以将它上传到 codepen.io,你必须在那里付费上传文件。该文件在 google 字体上不可用,因为它是自定义的。

我尝试将 link 放入加载字体函数中,如下所示:

loadFont(url);

但出现错误提示找不到文件。我将文件上传到 github 和 tinyupload,这里是 links:

Github

TinyUpload

minimal, complete and verifiable example

Mike 已经在评论中回答了,但我想我会扩展:

首先,您需要确保您使用的文件托管服务不会将您的文件隐藏在下载页面后面。使用 https://github.com/Tudor0404/files/blob/master/matrix-code-nfi.otf?raw=true link,你已经很接近了,但你还有另一个问题。

您需要养成注视 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)。

据我了解,您不应该像这样 link 直接访问 GitHub 存储库中的文件。如果您需要托管它们,您可以使用 GitHub Pages 之类的东西。 (GitHub Pages 默认允许 CORS)。

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