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

我终于知道为什么字体不能用了！我已经下载了该字体的拉丁语扩展版本，但无法正确显示。我所要做的就是下载该字体的纯拉丁文版本，它可以正常工作。

我看了 post 作者 limonte 的 post 字体后，我想下载纯拉丁文版本的字体： .

Answer 3

.woff2

第一种方法 - 步骤：

转到 iis 服务器，然后转到“站点”
双击要添加 MIME 类型的网站。
右键平移找到并单击“MIME 类型”
在最右侧的面板中，单击“添加”
在“文件扩展名：”中输入“.woff2”，在“MIME 类型：”中输入“application/font-woff2”

完成。刷新您的网站页面，这应该会立即反映出来。

第二种方式 - 步骤：

将下面添加到 web.config。

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

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

Woff2 @font-face 无法正确加载

Woff2 @font-face Won't Load Properly

html

css

fonts

woff2

添加了 .woff 文件