Azure WebApp未加载我的字体

Question

I have a little problem with my WebApp on Azure. 我的Azure上的WebApp有点问题。 My custom fonts are rendered properly on my localhost, but when I deploy my project to Azure and visit the WebSite, the WebBrowser is notifying me that my fonts couldn't be found (error 404). 我的自定义字体在我的localhost上正确呈现，但是当我将项目部署到Azure并访问WebSite时，WebBrowser通知我无法找到我的字体（错误404）。 But when I visit the FTP Server from Azure Portal I can find those Fonts. 但是当我从Azure门户访问FTP服务器时，我可以找到这些字体。 I also tried solution from this link: http://www.codepal.co.uk/show/WOFF_files_return_404_in_Azure_Web_Sites 我也试过这个链接的解决方案： http ： //www.codepal.co.uk/show/WOFF_files_return_404_in_Azure_Web_Sites

But sadly without any progress. 但遗憾的是没有任何进展。

Answer 1

I have a little problem with my WebApp on Azure. 我的Azure上的WebApp有点问题。 My custom fonts are rendered properly on my localhost, but when I deploy my project to Azure and visit the WebSite, the WebBrowser is notifying me that my fonts couldn't be found (error 404). 我的自定义字体在我的localhost上正确呈现，但是当我将项目部署到Azure并访问WebSite时，WebBrowser通知我无法找到我的字体（错误404）。 But when I visit the FTP Server from Azure Portal I can find those Fonts 但是当我从Azure门户访问FTP服务器时，我可以找到这些字体

The reason is that these formats do not exist in the MIME type list for IIS, if you still having problems and IIS still is not serving the files after adding MIME types, as Amey Vaidya said, you can try to remove the MIME type declaration before redeclaring MIME type declaration for these font files. 原因是这些格式在IIS的MIME类型列表中不存在，如果您仍然遇到问题并且IIS在添加MIME类型后仍未提供文件，正如Amey Vaidya所说，您可以尝试删除之前的MIME类型声明重新声明这些字体文件的MIME类型声明。

Same issue on my side: 同样的问题在我身边：

Project folder structure 项目文件夹结构

Note: I am using sansation_light.woff . 注意：我使用的是sansation_light.woff 。

Default.html 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 error 404错误

After adding MIME type, it works fine. 添加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>

Besides, please make sure you specify the correct URL of the font file in src property of @font-face rule . 此外，请确保在@ font-face rule的 src属性中指定字体文件的正确URL。 if possible, you can test my sample code on your Azure web app environment and check if it works, and if something wrong with your Azure web app environment that causes the issue, you can try to deploy your project to a new Azure web app and check if it can work. 如果可能，您可以在Azure Web应用程序环境中测试我的示例代码并检查它是否有效，如果Azure Web应用程序环境出现问题导致问题，您可以尝试将项目部署到新的Azure Web应用程序，检查它是否可以工作。

Answer 2

Add this to your web.config. 将其添加到您的web.config中。 Remove any previous ones. 删除任何以前的。 Clean project and Build it again. 清理项目并再次构建它。

 <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