另一个@font-face 问题答案

【问题标题】：Another @font-face issue另一个@font-face 问题
【发布时间】：2018-07-28 05:18:24
【问题描述】：

我正在构建一个网站，并想使用一种花哨的非标准字体。所以我得到了 .ttf 并通过一个基于 Web 的转换器运行它以生成一个（较小的）.woff2 文件。

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

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

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

浏览器恰好是 Firefox Quantum v58，但我不确定这有什么不同，因为在本地，一切正常。我可以理解本地和远程在安全设置方面可能存在差异，但我在关闭防火墙 (Zonealarm) 的情况下进行这些测试。

一些sn-ps：

/* 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>

和工作页面：

【问题讨论】：

您的开发工具的网络选项卡说什么？字体是否加载？一个区别可能是远程服务器提供了错误的 MIME 类型。
到目前为止，我什至从未意识到 Firefox 有一个叫做 Dev Tools 的东西，我的背景很长一段时间都不是 Web 开发。但是不，字体没有加载。
那么您在网络选项卡中找到了什么？没有404 not found 消息？不在控制台标签中？
令人着迷。浏览器正在尝试加载所有三个文件，但在字体文件上得到 404
那么路径不正确。请注意，服务器通常具有区分大小写的文件系统。所以你可以有两个目录fonts 和Fonts 和平地相邻。文件名也是如此。 Windows 没有区分大小写的文件系统（这很糟糕）。

标签： html css

【解决方案1】：

您的开发工具的网络标签显示了什么？字体加载了吗？

您的 lecal 开发服务器和远程服务器之间的一个区别可能是远程服务器提供了错误的 mime-type（必须是 font/woff2）。

如果找到404，则路径不正确。请注意，网络服务器通常具有区分大小写的文件系统。因此，您可以有两个目录fonts 和Fonts 彼此和平共处。文件名也是如此。 Windows 没有区分大小写的文件系统（这是 Windows 的许多糟糕之处之一）。

【讨论】：

这些工具很棒
Chrome 的开发工具更加出色。