在Azure JS Web應用程序上找不到字體.woff 404

Question

我的wwwroot上有這種字體，如nodejs應用程序的控制台所示：

我在css上有這種用法：

@font-face {
    font-family: myFont;
    src: url(resources/font/Montserrat-Bold.woff) format("truetype");
    font-weight: bold;
}
@font-face {
    font-family: myFont;
    src: url(resources/font/Montserrat-Light.woff) format("truetype");
    font-weight: 300;
}
@font-face {
    font-family: myFont;
    src: url(resources/font/Montserrat-Regular.woff) format("truetype");
    font-weight: 400;
}
@font-face {
    font-family: myFont;
    src: url(resources/font/Montserrat-SemiBold.woff) format("truetype");
    font-weight: 500;
}

---

html, body{
    font-family: myFont;
    font-weight: 300;
}

---

它在localhost上可以正常運行，但是我從我在azure上載的版本中得到了這個錯誤。

Answer 1

請使用https://<your-webapp-name>.azurewebsites.net/DebugConsole訪問Kudu工具的控制台，如果使用Express框架，請檢查下面的web.config和server.js文件。 而且我認為您需要在css文件中為url resources/font/...添加前綴符號/ 。

圖1.路徑wwwroot的web.config ＆ server.js

圖2. web.config靜態內容的重寫規則

圖3. server.js的快速靜態路由配置

Answer 2

IIS服務器節點可能存在一個問題，即它不了解您的字體模仿類型。 要解釋如何提供正確的字體，您需要：

1. 使用KuDo調試控制台下載自動生成的web.config文件。
2. 將這些行添加到該文件中的適當位置： <configuration> <system.webServer> <staticContent> <remove fileExtension=".otf" /> <remove fileExtension=".woff" /> <mimeMap fileExtension=".otf" mimeType="font/opentype" /> <mimeMap fileExtension=".woff" mimeType="application/x-woff" /> </staticContent> </system.websServer> </configuration>

希望這可以幫助。