html - Woff2 @ font-face无法正确加载

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

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





添加了.woff文件

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

这是使用.ttf文件时的外观：


这是当我使用.woff2文件时的外观：


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

最佳答案

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