font-face 不适用于托管服务提供商

Question

我在托管网站时遇到问题：在托管之前，当我在计算机上本地运行网站时，字体很好，但在托管时，字体不起作用。 （我在我的网页上使用 pdf 字体，我使用 dompdf 转换为 pdf）

代码如下：

        /* latin-ext */
        @font-face {
          font-family: 'Great Vibes';
          font-style: normal;
          font-weight: 400;
          src: local('Great Vibes'), local('GreatVibes-Regular'), url(./asset/fonts/font-sertifikat/sertifikat.woff2) format('woff2');
          unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
        }
        /* latin */
        @font-face {
          font-family: 'Great Vibes';
          font-style: normal;
          font-weight: 400;
          src: local('Great Vibes'), local('GreatVibes-Regular'), url(./asset/fonts/font-sertifikat/sertifikat4.woff2) format('woff2');
          unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
        }



        p.serif {
            font-family: 'Great Vibes';
            font-size: 70px;
            padding-top: 250px;
        }

Answer 1

您的托管服务提供商的网络服务器确实（可能）没有为字体发送正确的Content-Type 标头，因此您的浏览器拒绝加载它们。

你need proper content type headers for fonts to work。

您能否在浏览器开发工具的“网络”选项卡中检查 .woff2 文件的响应标头？

如果确实丢失了（将标头与本地托管进行比较），那就是问题所在。您需要让该服务器插入 http 标头 Content-Type: font/woff2(*)。这将取决于您的托管服务提供商。也许有些人会允许在.htaccess 中执行此操作，您可以将自己安装在您的站点中。

(*) 已编辑：之前的建议是 application/font-woff2。请参阅this answer，关于该主题还有很多其他内容。