我創(chuàng)建了一個(gè)頁(yè)面(基本上是一個(gè)工具)，它意味著用戶可以從Github克隆并在用戶的PC上使用，因此他們不需要web服務(wù)器來使用它(因此我不需要web服務(wù)器來為其他人提供工具)。

我希望頁(yè)面使用我選擇的字體，所以我下載了字體(。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');
}

當(dāng)我把這個(gè)工具放在我的web服務(wù)器上時(shí)(實(shí)際上我有，但這有點(diǎn)跑題了)，頁(yè)面顯示的字體是“好吧:https://edison23.net/tocjs/tocjs.html”。然而，當(dāng)我試圖在我的PC上打開localhost上的頁(yè)面時(shí)，我在Firefox的控制臺(tái)中收到CORS被阻止的警告，并且該頁(yè)面使用了機(jī)器上安裝的一些sans-serif字體:

跨來源請(qǐng)求被阻止:同一來源策略不允許讀取file:///S:/ENGs/dk lement/tools/tocjs/assets/Nunito-light . TTF中的遠(yuǎn)程資源。(原因:CORS請(qǐng)求不是http)。

我在谷歌上搜索了一下，看看有什么辦法可以避免這種情況，但還沒有找到解決辦法，因?yàn)槲艺业降乃薪ㄗh都是針對(duì)在網(wǎng)絡(luò)服務(wù)器上下載字體的，而不是在用戶的本地電腦上。

所以，親愛的So伙伴們，有沒有什么合理直接的方法來解決這個(gè)問題呢？

非常感謝。

編輯:如果這里的細(xì)節(jié)還不夠的話，我已經(jīng)在我的博客上發(fā)布了整個(gè)問題和解決方案的文檔..良好的..詳細(xì):https://www . Edison 23 . net/CSS-web fonts-in-a-locally-hosted-html-web-page/

您可以將字體數(shù)據(jù)作為base64內(nèi)容直接包含在css中(查看damianfrizzi的回答)。

因此，您可以包含這個(gè)自定義的包含css的字體文件，并使用它來定義一個(gè)新的字體，然后在您的其他css文件上使用這個(gè)字體。

編輯:在fontsquirrel上找到此問題的頁(yè)面，其中包含以下參數(shù):

您下載zip文件包含嵌入在css文件中的字體: