1

我在尝试导入 woff2 字体文件以在简单的测试网页中使用时遇到问题。

以下是我组织和编码测试网页的方式： 测试网页的文件目录 测试网页代码

添加了 .woff 文件

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

这是我使用 .ttf 文件时的样子： 测试页面成功加载字体

这就是我使用 .woff2 文件时的样子： 测试页面无法加载字体

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

4

3 回答 3

4

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

在看过 limonte的这篇文章后，我想下载该字体的纯拉丁版本： Font rendering in Chrome (woff2) - after load font family don't want to change。

于 2017-07-16T06:48:19.797 回答
2

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

于 2020-09-24T11:30:06.527 回答
0 
@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 ..

于 2017-07-16T01:12:54.390 回答