Azure WebApp 未加载我的字体

本文介绍了Azure WebApp 未加载我的字体的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在 Azure 上的 WebApp 有一点问题.我的自定义字体在我的本地主机上正确呈现，但是当我将项目部署到 Azure 并访问网站时，WebBrowser 通知我找不到我的字体(错误 404).但是当我从 Azure 门户访问 FTP 服务器时，我可以找到那些字体.我还尝试了此链接的解决方案:

注意:我正在使用

添加MIME类型后，就可以正常使用了.

<静态内容><删除文件扩展=".woff"/><mimeMap fileExtension=".woff" mimeType="application/font-woff"/><删除文件扩展=".woff2"/><mimeMap fileExtension=".woff2" mimeType="application/font-woff2"/></静态内容></system.webServer>

此外，请确保在 .如果可能，您可以在您的 Azure Web 应用程序环境中测试我的示例代码并检查它是否有效，如果您的 Azure Web 应用程序环境有问题导致该问题，您可以尝试将您的项目部署到新的 Azure Web 应用程序并检查它是否可以工作.

I have a little problem with my WebApp on Azure. 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). But when I visit the FTP Server from Azure Portal I can find those Fonts.I also tried solution from this link:http://www.codepal.co.uk/show/WOFF_files_return_404_in_Azure_Web_Sites

But sadly without any progress.

解决方案

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.

Same issue on my side:

Project folder structure

Note: I am using 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 error

After adding MIME type, it works fine.

<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. 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 WebApp 未加载我的字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！