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

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>

我的文件结构是根目录，然后是两个文件夹，一个名为 fonts(用于字体)，另一个名为 css(用于 css)。任何帮助，将不胜感激。谢谢!!

Answer 1

您是否使用 Azure 网站、Azure Webrole 或 Azure 虚拟机？您是否仅使用纯 HTML、ASP.NET、PHP 或 Node 进行开发？

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

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

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

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