在 p5.js 中使用托管字体
Using Hosted Fonts with p5.js
对于编码挑战，我需要将字体加载到 p5 中。然而，挑战只能使用 codepen 进行编码。由于这个（以及我缺乏 codepen pro），我需要找到一种替代加载字体的方法。我决定将它托管在我的网站上，并在 loadFont() 函数中尝试 link 后，它不会加载。我的笔在下面。
https://codepen.io/arman311/pen/XobKBL
编辑：我试过@Elliot-Robson 的修复，现在我得到这个错误：
“https://codepen.io/arman311/pen/XobKBL”的页面是通过 HTTPS 加载的，但请求了不安全的 XMLHttpRequest 端点“.../fonts/Roboto-Regular.ttf”。此请求已被阻止；内容必须通过 HTTPS 提供。
由于实际问题是 CORS 问题（并且您的服务器似乎使用 Apache），请尝试在与您的字体相同的文件夹中创建一个 .htaccess 文件。
在此文件中添加以下内容：
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET"
这将允许任何来源访问该文件中的任何内容。
CORS 旨在阻止浏览不同网站的用户从您的网站加载数据（因为附加了 cookie，如果他们已登录 - 他们将获得与登录时相同的数据）。这通常是通过代表用户发出 POST 请求（但并非总是）来利用的。
因为它应该只影响字体文件夹，所以实现起来应该相对安全，只需确保在挑战结束时删除 htaccess 文件，以避免人们免费使用没有 CORS 的字体。
对于编码挑战，我需要将字体加载到 p5 中。然而，挑战只能使用 codepen 进行编码。由于这个（以及我缺乏 codepen pro），我需要找到一种替代加载字体的方法。我决定将它托管在我的网站上，并在 loadFont() 函数中尝试 link 后，它不会加载。我的笔在下面。
https://codepen.io/arman311/pen/XobKBL
编辑：我试过@Elliot-Robson 的修复，现在我得到这个错误：
“https://codepen.io/arman311/pen/XobKBL”的页面是通过 HTTPS 加载的，但请求了不安全的 XMLHttpRequest 端点“.../fonts/Roboto-Regular.ttf”。此请求已被阻止；内容必须通过 HTTPS 提供。
由于实际问题是 CORS 问题（并且您的服务器似乎使用 Apache），请尝试在与您的字体相同的文件夹中创建一个 .htaccess 文件。
在此文件中添加以下内容：
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET"
这将允许任何来源访问该文件中的任何内容。
CORS 旨在阻止浏览不同网站的用户从您的网站加载数据（因为附加了 cookie，如果他们已登录 - 他们将获得与登录时相同的数据）。这通常是通过代表用户发出 POST 请求（但并非总是）来利用的。
因为它应该只影响字体文件夹，所以实现起来应该相对安全，只需确保在挑战结束时删除 htaccess 文件，以避免人们免费使用没有 CORS 的字体。