在离线用户 PC 上加载本地托管字体 (.ttf)（避免跨源请求被阻止）

Question

我创建了一个页面（基本上是一个工具），旨在由用户从 Github 克隆并在用户的 PC 上使用，这样他们就不需要网络服务器来使用它（等等我不需要网络服务器来为其他人提供工具）。

我希望页面使用我选择的字体，所以我下载了字体 (.ttf) 并使用 @font-face 加载 .ttf 文件（与 .css 文件):

@font-face {
  font-family: 'Nunito Light';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('Nunito-Light.ttf') format('truetype');
}

当我在我的网络服务器上托管该工具时（我确实有，但有点离题），页面显示的字体很好：https://edison23.net/tocjs/tocjs.html。但是，当我尝试在我的 PC 上的本地主机上打开该页面时，我在 Firefox 的控制台中收到了 CORS 被阻止的警告，并且该页面使用了一些安装在机器上的无衬线字体：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///S:/ENGs/DKlement/tools/tocjs/assets/Nunito-Light.ttf. (Reason: CORS request not http).

我用 Google 搜索了一下，看看有什么方法可以避免这种情况，但一直找不到解决方案，因为我发现的所有建议都是针对在网络服务器上加载字体的，而不是在用户的本地电脑。

所以，亲爱的 SO 用户，有没有一些相当简单的方法来解决这个问题？

非常感谢。

edit：如果这里的细节还不够，我已经将整个问题和解决方案的文档发布到我的博客中..好..详细：https://www.edison23.net/css-webfonts-in-a-locally-hosted-html-web-page/

Answer 1

您可以将字体数据直接包含在您的 css 中作为 base64 内容（查看 damianfrizzi 的）。

所以你可以包含这个自定义的css-containing-a-a-font文件并用它来定义一个新的字体，然后在你的另一个css上使用这个字体文件。

编辑： 发现 this page on fontsquirrel from this question 具有此参数：

您下载的 zip 文件包含嵌入在 css 文件中的字体：

在离线用户 PC 上加载本地托管字体 (.ttf)（避免跨源请求被阻止）

Load locally hosted font (.ttf) on an offline user PC (avoid Cross-Origin Request Blocked)

css

fonts

font-face

local

webfonts