@font-face 嵌入在 aspx 文件中不起作用

Question

我正在尝试在我的网站中使用一些有趣的字体。但不知何故，字体没有被加载或由于某种原因无法正常工作。

我有一个母版页，其中存在 2 个<asp:ContentPlaceHolder> 标签。一个在 head 部分用于类似用途，例如使用 external fonts ，另一个在 body 部分 <asp:ContentPlaceHolder>。

我尝试了两件事：

1) 提供存储在我的视觉工作室中的字体的网址。

2) 其他给出我的文件系统的 url。

这是我的 HTML 文件：

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <style>
        @font-face{
            font-family:Junction;
            src : url("http:localhost:63183/fonts/Junction.otf") format('opentype');
        }
        @font-face{
            font-family:chunkfive;
            font-weight:bold;
            src : url("f:\practicals7th sem\project docs\templates\temp1\chunkfive.otf") format('opentype');
        }

    </style>
</asp:Content>

这是我的正文部分内容：

<div style="text-align: center; font-family:'Junction.otf' ; font-size: 20px; color: #db2828">
                            <%# Eval("Name") %>

Answer 1

您需要在 IIS 中设置 MimeTypes：

<system.webServer>
    <staticContent>
        <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
        <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
        <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
        <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
        <mimeMap fileExtension=".otf" mimeType="font/opentype" />
    </staticContent>
</system.webServer>

然后您可以使用字体的相对路径，即

 @font-face{
            font-family:Junction;
            src : url("/fonts/Junction.otf") format('opentype');
        }
        @font-face{
            font-family:chunkfive;
            font-weight:bold;
            src : url("/fonts/chunkfive.otf") format('opentype');
        }