问题标签 [woff2]

为了防止与字体加载时间相关的字体渲染滞后，我编写了一些简单的脚本来加载包含 CSS@font-face和自定义字体的延迟。由于该解决方案，默认情况下使用系统字体（无延迟），然后它们被新 CSS 和新字体覆盖。但是，除了 Chrome 之外，解决方案在任何地方都适用。在 chrome 网络选项卡中，我可以看到字体已加载，但不知何故它们没有重新渲染。

它在 IE 和 Firefox 中的外观（所需字体）：

和 Chrome（系统字体）：

HTML：

默认 CSS：

加载的 CSS：

JS：

我使用 Stylus 编写 CSS 和stylus.url()base64 编码所有图像的方法。我的问题是手写笔也会对其中一种字体进行编码。它只是一种被编码的 woff2 字体。所有其他都保留为 URL。

如何在使用该stylus.url()方法时忽略字体文件或以其他方式阻止它被 base64 编码。

字体样式：

主.css：

引导字体未正确加载 glyphicons-halflings-regular.woff2。

它在我的 Chrome 控制台中显示错误。

有什么解决方案可以让它正确加载，这样它就不会在控制台中显示错误？

我正在使用谷歌字体，并且正在检查我的 WOFF2 文件实际上会有多大。

所以为了测试，我通过他们的 API http://fonts.googleapis.com/css?family=PT+Sans+Narrow&text=hello加载了一个字体，然后查看了输出

然后我物理下载了文件http://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4UU-p1xzoRgkupcXIqgYFBc.woff2

我很震惊地看到它显然超过了 2kb。

怎么会这样？它只是“你好”的字形。

为了比较，我加载了整个字体（所有字形，使用相同的技术，这给了我一个37kb的文件。

我是否天真地认为自定义字体应该是低文件大小？或者有没有办法让这个压缩得更多？以这种速度，我几乎在想，加载 SVG 会更好......

我正在查看 FontAwesome path.less，看起来它正在加载一堆相同但类型不同的字体......

我真的需要为 FontAwesome 加载所有这些字体类型还是只需要 WOFF2 类型？

.woff 文件出现 404 错误。即使我已按照.woff2 字体的正确 MIME 类型中的说明将 .woff 添加到 IIS 中的 MIME 类型，我仍然收到 404 错误。它适用于 IE，但不适用于 chrome。任何指针？我无法将以下内容添加到 web.config。

任何指针将不胜感激。

经过一些研究，我注意到为了在 IIS 中使用 woff2 字体类型，您需要在 web 项目的 web.config 上设置以下内容，以避免从服务器获取 404：

在本地，这似乎可行，但是当项目部署在 IIS 上时，我不断收到 404，问题可能是什么原因？谢谢

到目前为止，我一直在使用 Paul Irish 的防弹字体语法

但我只是在看 caniuse 上对 .woff 和 .woff2 文件的支持，它说 IE9+ 支持 woff。大多数关于这个主题的文章都来自 2009 年左右，而在撰写本文时已经是整整 7 年前。当 woff 现在得到如此广泛的支持时，我们真的需要继续声明 ttf、otf、eot 和 svg 吗？

我正在尝试通过 HTML5 FileSystem api 使我的整个网站脱机。到目前为止，我没有任何问题，除了我从谷歌网站获得的 Roboto.woff2 字体。基本上我有一个 blob 写入持久存储中的文件。但是，每当我尝试加载实际页面时，控制台都会显示：无法解码下载的字体：文件系统：http://localhost/persistent/fonts/roboto.woff2 1 OTS 解析错误：解压缩的 WOFF 2.0 的大小设置为 0 . 当我在文件系统中查看实际文件时：http://localhost/persistent/fonts/，文件大小也不同。我怀疑它与文本/纯文本类型有关。我尝试过使用 application/x-font-woff、application/x-font-woff2、font/woff2 等，但到目前为止没有任何效果。任何帮助，将不胜感激！

是的，我知道这是一个被问到又被问到的问题。我更愿意认为我做了功课，但我的浏览器仍然没有从网络服务器中提取字体（根据日志）。

CSS：

测试页面在我的测试站点这里。由于我没有选择和想法，我决定在这里问，作为最后的手段。