無法解碼下載的字體

Question

這是我在 Chrome 中遇到的錯誤，不幸的是，搜索它並沒有給我太多結果。 字體本身顯示正確。 但是我仍然收到此錯誤/警告。 更具體地說，這是完整的警告：

“無法解碼下載的字體： http://localhost:8000/app/fonts/Lato/ ”

我的 CSS 是這些：

@font-face {
    font-family:"Lato";
    src: url("../fonts/Lato/");
}

html, body {
    font-family:'Lato';
}

我就是不明白。 字體應用正確，但警告始終存在。 嘗試使用Sans-Serif會使字體恢復為正常的瀏覽器字體，所以可能是這樣，但我不確定，即使在搜索之后我也沒有找到任何東西。 謝謝！

編輯

有各種字體文件，都來自同一個系列。 我正在嘗試將它們全部加載。 字體文件是.ttf 。 我正在從本地文件夾加載它們，並且有各種字體文件，例如Lato-Black.ttf 、 Lato-Bold.ttf 、 Lato-Italic.ttf等。

Answer 1

在 css 規則中，您必須添加文件的擴展名。 這個例子得到了最深的支持：

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

編輯：

“無法解碼下載的字體”意味着字體已損壞或不完整（缺少指標、必要的表格、命名記錄、一百萬種可能的東西）。

有時這個問題是由字體本身引起的。 Google 字體提供了您需要的正確字體，但如果需要字體，我使用Transfonter生成所有字體格式。

有時是損壞文件的 FTP 客戶端（在這種情況下不是因為在本地 PC 上）。 確保以二進制而不是 ASCII 傳輸文件。

Answer 2

我在 Visual Studio 中遇到了類似的問題，這是由於相關字體的url()路徑不正確造成的。

更改后我停止收到此錯誤（例如）：

@@font-face{
    font-family: "Example Font";
    src: url("/Fonts/ExampleFont.eot?#iefix");

對此：

@@font-face{
    font-family: "Example Font";
    src: url("../fonts/ExampleFont.eot?#iefix");

Answer 3

將format('woff')更改為format('font-woff')解決了這個問題。

與 Germano Plebani 的回答相比，只有一點點變化

 @font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('font-woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

請檢查您的瀏覽器來源是否可以打開它以及類型是什么

Answer 4

確保您的服務器使用正確的mime/type發送字體文件。

我最近在使用nginx 時/etc/nginx/mime.types了同樣的問題，因為其 vanilla /etc/nginx/mime.types文件中缺少某些字體 mime 類型。

我解決了在需要它們的位置添加缺少的 mime 類型的問題，如下所示：

location /app/fonts/ {

  #Fonts dir
  alias /var/www/app/fonts/;

  #Include vanilla types
  include mime.types;

  #Missing mime types
  types  {font/truetype ttf;}
  types  {application/font-woff woff;}
  types  {application/font-woff2 woff2;}
}

您還可以查看此以擴展nginx 中的 mime.types ： 擴展默認的 nginx mime.types 文件

Answer 5

我不得不將type="text/css"到我的鏈接標簽中。 我把它從：

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">

到：

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet" type="text/css">

在我更改它之后，錯誤消失了。

Answer 6

我剛剛遇到了同樣的問題並通過更改解決了它

src: url("Roboto-Medium-webfont.eot?#iefix")

到

src: url("Roboto-Medium-webfont.eot?#iefix") format('embedded-opentype')

Answer 7

對我來說，當我使用 https 引用谷歌字體時發生了這個錯誤。 當我切換到 http 時，錯誤消失了。 （是的，我多次嘗試以確認這是原因）

所以我改變了：

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,100,500,900);

到：

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,100,500,900);

Answer 8

當您使用錯誤的 FTP 方法上傳/下載字體時，有時會發生此問題。 字體必須使用二進制方法進行 FTP 編輯，而不是 ASCII。 （根據您的心情，這可能會違反直覺，哈哈）。 如果您使用 ASCII 方法 ftp 字體文件，您會收到此錯誤消息。 如果您使用“自動”方法 ftp 文件，並且收到此錯誤消息，請嘗試 ftp 強制二進制方法。

Answer 9

我在使用 font awesome v4.4 時遇到了同樣的問題，我通過刪除 woff2 格式來修復它。 我只在 Chrome 中收到警告。

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Answer 10

在我的情況下，它是由 .htaccess 中的錯誤路徑文件引起的。 請檢查您的文件路徑的正確性。

Answer 11

對我來說，錯誤是在上傳字體文件之前忘記將 FTP 置於二進制模式。

編輯

您可以通過上傳其他類型的二進制數據（如圖像）來測試這一點。 如果它們也無法顯示，那么這可能是您的問題。

Answer 12

我也遇到了同樣的問題，但我已經通過在所有 .ttf 文件的響應標頭中添加 'Content-Type' : 'application/x-font-ttf' 解決了

Answer 13

就我而言，這是由於創建包含添加字體文件的 SVN 補丁文件造成的。 像這樣：

1. 將本地文件系統中的字體文件添加到被顛覆的主干
2. 中繼按預期工作
3. 創建主干更改的 SVN 補丁，以包括字體文件的添加
4. 將補丁應用到另一個分支
5. 字體文件被添加到被顛覆的分支（並且可以提交），但被損壞，在 OP 中產生錯誤。

解決方案是將字體文件直接從我的本地文件系統上傳到分支。 我認為這是因為 SVN 補丁文件必須將所有內容轉換為 ASCII 格式，並且不一定為字體文件保留二進制文件。 但這只是一個猜測。

Answer 14

就我而言，下載模板時，字體文件只是空文件。 應該是下載的問題。 Chrome 對此給出了這個通用錯誤。 一開始以為woff font-woff解決了，結果只是讓Chrome忽略了字體。 我的解決方案是一一找到字體並下載/替換它們。

Answer 15

在我的情況下——使用 React 和 Gatsby——通過仔細檢查我的所有路徑解決了問題。 我在 Sass 中使用 React/Gatsby，Gatsby 源文件在與編譯文件不同的位置尋找字體。 一旦我將文件復制到每個路徑中，這個問題就消失了。

Answer 16

如果您使用 express，則需要通過添加以下內容來允許提供靜態內容： var server = express(); server.use(express.static('./public')); // 其中 public 是應用程序根文件夾，其中包含任何級別的字體，即 public/fonts 或 public/dist/fonts... // 如果您使用連接，請谷歌搜索類似的配置。

Answer 17

我使用 .Net Framework 4.5/IIS 7

為了修復它，我將文件 Web.config 放在帶有字體文件的文件夾中。

Web.config 的內容：

<?xml version="1.0"?>
<configuration>
  <system.web>
    <authorization>
      <allow users="*" />
    </authorization>
  </system.web>
</configuration>

Answer 18

對我來說，這是未下載的 lfs 文件的問題

git lfs fetch --all

解決了這個問題。

見https://github.com/git-lfs/git-lfs/issues/325

Answer 19

如果它在服務器上（不在本地主機中），則嘗試手動上傳字體，因為有時 FTP 客戶端（例如 FileZilla）會損壞文件並可能導致問題。 對我來說，我是使用 Cpanel 界面手動上傳的。

Answer 20

我的情況看起來很相似，但字體已損壞（因此無法解碼）。 它是由maven中的配置引起的。 在maven-resources-plugin為字體擴展添加 nonFilteredFileExtension 幫助了我：

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <configuration>
        <nonFilteredFileExtensions>
            <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
            <nonFilteredFileExtension>otf</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
            <nonFilteredFileExtension>eot</nonFilteredFileExtension>
        </nonFilteredFileExtensions>
    </configuration>
</plugin>

Answer 21

我的問題發生在與 chrome 不同的瀏覽器中。 注意 URL 和格式之間的昏迷，這就是所有瀏覽器都恢復正常的方式。 老實說，它也可以在沒有這種“格式”的情況下工作，但我決定保留它。

@font-face {
  font-family: "Roboto";
  src: url("~path_to_font/roboto.ttf"), format("ttf");
}

Answer 22

谷歌也失敗了...

昨天同樣的問題是由谷歌方面的一些事情引起的，但僅限於 Win7 和一些 Win10 計算機。

https://github.com/google/material-design-icons/issues/1220

不管怎樣，不到24小時就及時解決了。

我建議總是從 CDN 備份我們依賴的東西，比如這些字體。

Answer 23

AWS Amplify特定的無法解碼下載的字體問題如上所述 - 但將woff2添加到應用設置/重寫和重定向中的默認目標地址/index.html規則解決了任何woff2錯誤👍

前

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

后

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/>