Woff2@font-face无法正确加载

Question

我有麻烦尝试导入一个woff2字体文件在一个简单的测试网页中使用。

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

我觉得我好像在某个地方犯了一个简单的格式错误，但我似乎不知道我错在哪里。感谢任何帮助。

Answer 1

.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添加条目。否则添加整个标记。

Answer 2

@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 3

我终于发现为什么字体不起作用了！我下载了拉丁扩展版本的字体，它不能正确显示。我所要做的就是下载纯拉丁文版本的字体，它就像它应该做的那样工作。

在看了Limonte的这篇文章后，我想下载纯拉丁文版本的字体：Chrome中的字体渲染(woff2)-加载后字体家族不想改变。