Azure WebApp未加載我的字體

Question

我的Azure上的WebApp有點問題。 我的自定義字體在我的localhost上正確呈現，但是當我將項目部署到Azure並訪問WebSite時，WebBrowser通知我無法找到我的字體（錯誤404）。 但是當我從Azure門戶訪問FTP服務器時，我可以找到這些字體。 我也試過這個鏈接的解決方案： http ： //www.codepal.co.uk/show/WOFF_files_return_404_in_Azure_Web_Sites

但遺憾的是沒有任何進展。

Answer 1

我的Azure上的WebApp有點問題。 我的自定義字體在我的localhost上正確呈現，但是當我將項目部署到Azure並訪問WebSite時，WebBrowser通知我無法找到我的字體（錯誤404）。 但是當我從Azure門戶訪問FTP服務器時，我可以找到這些字體

原因是這些格式在IIS的MIME類型列表中不存在，如果您仍然遇到問題並且IIS在添加MIME類型后仍未提供文件，正如Amey Vaidya所說，您可以嘗試刪除之前的MIME類型聲明重新聲明這些字體文件的MIME類型聲明。

同樣的問題在我身邊：

項目文件夾結構

注意：我使用的是sansation_light.woff 。

default.html中

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style>
        @font-face {
            font-family: myFirstFont;
            src: url(/fonts/sansation_light.woff);
        }

        #cont {
            font-family: myFirstFont;
        }
    </style>
</head>
<body>
    <div>hello world</div>
    <br />
    <div id="cont">hello world</div>
</body>
</html>

404錯誤

添加MIME類型后，它可以正常工作。

<system.webServer>
<staticContent>
  <remove fileExtension=".woff" />
  <mimeMap fileExtension=".woff" mimeType="application/font-woff" />

  <remove fileExtension=".woff2" />
  <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>
</system.webServer>

此外，請確保在@ font-face rule的 src屬性中指定字體文件的正確URL。 如果可能，您可以在Azure Web應用程序環境中測試我的示例代碼並檢查它是否有效，如果Azure Web應用程序環境出現問題導致問題，您可以嘗試將項目部署到新的Azure Web應用程序，檢查它是否可以工作。

Answer 2

將其添加到您的web.config中。 刪除任何以前的。 清理項目並再次構建它。

 <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <remove fileExtension=".eot" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
    </staticContent>
  </system.webServer>

Azure WebApp未加載我的字體

問題描述

2 個解決方案

解決方案1
10 已采納 2017-08-07 05:46:22

解決方案2
1 2017-08-06 18:03:22

Azure WebApp未加載我的字體

問題描述

2 個解決方案

解決方案1 10 已采納 2017-08-07 05:46:22

解決方案2 1 2017-08-06 18:03:22

解決方案1
10 已采納 2017-08-07 05:46:22

解決方案2
1 2017-08-06 18:03:22