Woff2 @ font-face无法正常加载

Question

我在尝试导入woff2字体文件时无法在简单的测试网页中使用。

以下是我如何组织和编码测试网页：

添加.woff文件

一切都在一个名为'test'的文件夹中，@ font-face src引用了我想测试的本地.woff2字体文件。不幸的是，除非我使用.ttf字体文件，否则标题的字体不会显示正确的字体。

这是我使用.ttf文件时的样子：

这就是我使用.woff2文件时的样子：

我觉得好像我在某个地方犯了一个简单的格式错误，但我似乎无法弄清楚我哪里出错了。任何帮助表示赞赏。

Answer 1

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

希望这有助于在做类似的事情时找到它一段时间（因为发现它没有写出来，因此没有得到赞扬） 但是我建议根据你的浏览器尝试woff而不是woff2。

Answer 2

我终于找到了为什么字体不起作用！我下载了字体的Latin-Extended版本，但无法正确显示。我所要做的就是下载字体的普通拉丁文版本，它可以正常工作。

我想通过 limonte： Font rendering in Chrome (woff2) - after load font family doesn't want to change看一下这篇文章的普通拉丁文版本。

Answer 3

.woff2

第一种方法-步骤：

1. 转到iis服务器，然后转到“站点”
2. 双击要添加MIME类型的网站。
3. 右键找到并单击“ MIME类型”
4. 在最右边的窗格中，单击“添加”
5. 在“文件扩展名：”中键入“ .woff2”，在“ MIME类型：”中键入“ application / font-woff2”

完成。刷新您的网站页面，现在应该会反映出来。

第二种方法-步骤：

在Web.config中添加以下内容。

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

注意：如果已经存在，则只需添加woff2的条目即可。否则，请添加整个标签。