Question

我正在建立一个网站，并希望使用一种奇特的非标准字体。所以我抓住了.ttf并通过基于网络的转换器运行它来生成（较小的）.woff2文件。

他们还提供了一个小页面来测试html，css和字体。（我稍微修改了一下，把它变成了.aspx并让它抽出服务器时间，这样我就可以确定它本身就很清爽了。

结果是，当我在本地预览此文件时（我使用Visual Studio 2017），一切正常。然后我将.aspx，.css和.woff2文件FTP到（远程）测试服务器（与开发中的位置完全相同），并且不显示字体。

所以我的问题是，本地和远程站点之间有什么不同，这样本地站点才能正确显示页面，但远程站点不会？

浏览器碰巧是Firefox Quantum v58，但我不确定这会有多大区别，因为在本地，一切都有效。我可以理解本地和远程在安全设置方面可能存在差异，但我正在关闭防火墙（Zonealarm）进行这些测试。

一些片段：

/* font converted using font-converter.net. thank you! */
@font-face {
    font-family: 'ad';
    src: url('Fonts/ActionDisplay.woff2') format('woff2');
}

<html>
    <head>
        <title>You converted a font!</title>
        
        <link rel="stylesheet" href="stroke.css" type="text/css" media="all" />
        
        <style>
            .thankyou, .notes {
                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
                font-size: 16px;
            }

            .sample {
                font-family: 'ad', Courier;
                font-size: 24px;
                border: 1px solid #ddd;
                display: inline-block;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <p class="thankyou">
            Thank you for using <a href="http://www.font-converter.net">font-converter.net</a>!<br />
            We really appreciate you for using our little service. We hope we can help you with our services again soon.
            <br /><br />
            And there it is, your lovely converted web font:
        </p>

        <p class="sample">
            The quick brown fox jumps over the lazy dog
        </p>

        <p class="notes">
            <b>CSS Stylesheet:</b> You'll find the stylesheet in this folder (if selected). The file is called <code>style.css</code><br />
            <b>web fonts:</b> You'll find all converted fonts in a subdirectory called <code>fonts</code> in this folger<br />
            <% Response.Write(DateTime.Now.AddHours(8)) %>
        </p>
    </body>
</html>

和工作页面：

Answer 1

您的开发工具的网络标签有什么用？字体是否加载？

lecal dev服务器和远程服务器之间的一个区别可能是远程服务器提供了错误的mime-type（需要font/woff2）。

如果找到404，则路径不正确。请注意，Web服务器通常具有区分大小写的文件系统。因此，您可以将两个目录fonts和Fonts安静地彼此相邻。对于文件名，同样的ofc也是如此。 Windows没有区分大小写的文件系统（这是很多关于Windows的事情之一）。

另一个@ font-face问题

1 个答案: