Question

我无法将Azure中的字体加载到我的css / html中，导致它们无法显示在我的页面上。这是我的代码

CSS:@font-face {
font-family: 'DTLArgo-Bold';
src: url('../fonts/dtlargot-bold-webfont.eot');
src: url('../fonts/dtlargot-bold-webfont.eot?#iefix') format('embedded-opentype'),
     url('../fonts/dtlargot-bold-webfont.woff') format('woff'),
     url('../fonts/dtlargot-bold-webfont.ttf') format('truetype'),
     url('../fonts/dtlargot-bold-webfont.svg#dtl_argot_bold') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'dtl_argot_regular';
src: url('../fonts/dtlargot-webfont.eot');
src: url('../fonts/dtlargot-webfont.eot?#iefix') format('embedded-opentype'),
     url('../fonts/dtlargot-webfont.woff') format('woff'),
     url('../fonts/dtlargot-webfont.ttf') format('truetype'),
     url('../fonts/dtlargot-webfont.svg#dtl_argot_regular') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'DTLArgoT-Light';
src: url('../fonts/dtlargot-light-webfont.eot');
src: url('../fonts/dtlargot-light-webfont.eot?#iefix') format('embedded-opentype'),
     url('../fonts/dtlargot-light-webfont.woff') format('woff'),
     url('../fonts/dtlargot-light-webfont.ttf') format('truetype'),
     url('../fonts/dtlargot-light-webfont.svg#dtl_argot_light') format('svg');
font-weight: normal;
font-style: normal;

}

.font{
font-family: DTLArgoT-Light, Arial, sans-serif;
}


Azure Web.config:
<?xml version="1.0"?>

<configuration>

<system.web>
    <compilation debug="false" targetFramework="4.0" />
</system.web>
<system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
<staticContent>
  <mimeMap fileExtension=".mp4" mimeType="video/mp4" />  
  <remove fileExtension=".svg" />
  <remove fileExtension=".eot" />
  <remove fileExtension=".woff" />
  <mimeMap fileExtension=".svg" mimeType="image/svg+xml"  />
  <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
  <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
</staticContent>    
</system.webServer>
 </configuration>

我的文件结构是root然后是两个文件夹，一个叫做fonts（用于字体），另一个叫css（用于css）。任何帮助，将不胜感激。谢谢！

Answer 1

您使用的是Azure网站，Azure Webrole还是Azure虚拟机？您是使用纯HTML，ASP.NET还是PHP或Node开发的？

假设您在网站上，则必须更改名为web.config的文件，该文件位于您网站的站点文件夹中。

以下是一个非常简单的web.config示例，它注册了由Azure网站提供服务的WOFF文件：

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

您可能还想为您使用的所有网络字体扩展添加mimeMap。但要小心选择纠正mime类型，因为它可能无法正常工作。例如，大多数用户都会添加application/x-font-woff，但可能对他们不起作用，因为the RFC, which now is final states it should be application/font-woff。

需要帮助将字体从Azure加载到网页中

1 个答案: