问题标签 [woff]

对于我正在构建的网站，我试图通过在头部加载一些内联字体/异步 JS 来获得绝对最佳的性能。为了解决 Typekit 字体加载所需的额外 http 请求和延迟加载，我选择在我的 LESS / CSS 中对我的 woff / woff2 字体（FontAwesome、Lato、Lato Bold）进行 base 64 编码。在本地运行时，我的 DOMContentLoaded（蓝条）降低到 30 毫秒，但它出现的字体内联导致我的实际加载时间（红条）为 280 毫秒。

索引.html

依赖.js

tix.js

tix.fast.js

tix.less (tix.css) 像这样通过@font-face 导入所有字体 -

如您所见，我使用我的内联 CSS 和 html 元素上的手动“wf-inactive”类隐藏了所有文本元素。然后我在加载我的 CSS 字体之前异步加载我的主脚本（这样下载将在 css 阻塞之前开始）。depends.js 拥有我所依赖的所有外部库（AngularJS、jquery、signalr 等）。tix.js 包含我所有的应用程序逻辑（实际的 Angular 应用程序，比depends.js 小得多，但会更频繁地更新，因此我将它们拆分以从depends.js 缓存中受益）。在异步脚本之后，我加载了我的 css 文件（所有样式捆绑在一个 CSS 文件中，包括我的内联 base 64 字体），它会阻塞，在完成加载之后，我然后加载 tix.fast.js，它只是将 html 类更新为“wf-active”，将页面文本设置为可见（模拟 Typekit）。

我基本上看到网络选项卡中内联的每种字体都有额外的网络延迟。这让我感到困惑有几个原因：

1. 为什么这些内联字体首先被视为网络请求？他们使用 url(data....) 标签，但内联它们的重点是避免网络请求，所以这里发生了什么？对我来说，网络请求正在下载它们嵌入的文件，但加载字体时可能需要更多的跃点？

2. 我试图尽量减少 http 调用的数量，因为 chrome 只允许同时进行 6 个。这就是我的字体挂掉的原因吗？是不是因为 DOM 直到接近红色加载点才尝试访问它们，而 @font-face 那时只是延迟加载它们？我最好的选择是什么？

当我嵌入 CSS3 woff 字体时：

如果我使用本地主机或服务器主机，在任何浏览器中都可以完美运行。

但是当我创建可移植的 .html 文件并打开它时。字体适用于任何浏览器，但不适用于 Internet Explorer。

为什么会发生这种情况？（除了 Internet Explorer 不好的事实之外）

谢谢，

我看到了一个使用单独字体文件（woff）并使用源代码的网站示例

下面是这个元素的 CSS

在源代码中，我看到有一个来自网络（服务器）的 .woff 字体文件。我想知道这个方法是什么（任何特定的名称）？我们可以通过使用 unicodes 来做同样的事情，这有什么好处呢？网上有这个礼物的标准文件吗？

已尽我所能优化我的网站。在瀑布模式下运行 ping 页面测试时，我的得分可能为 90/100，但页面加载速度很慢，在 400kb 以下时最多需要 6-9 秒。一切都在 1 秒或更短的时间内加载，罪魁祸首是等待时间为 6-8 秒的字体，主要是 .woff

问题字体的大小：2、19 和 20 kb。60kb 的文件在 1 秒内加载，所以不是大小问题？？

主题开发者责怪网络主机服务器，网络主机责怪开发者。尝试禁用 woff 文件，然后 tt 接管缓慢的加载时间。

无法为 woff 添加 mime，服务器 Bluehost 不支持。

绝对难倒。任何想法表示赞赏！http://www.joyjournist.com

我正在使用谷歌字体，并且正在检查我的 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 会更好......

我收到了一组带有一组 woff 文件的 html 文件。

由于某种原因，字符“%”在文本中不可见，如第一个屏幕截图所示。

如果我摆弄 css 并删除 font-family 属性（它指向嵌入的字体），那么 '%' 字符再次可见

当然这不是我期望的字体。

我想知道是什么导致了这个问题？我该如何解决这个问题？

编辑：

底层的html是这样的：

以及对应的css类

我正在尝试解析一些网络字体，如 woff、ttf 等。

这就是我开始使用这个库的原因

但是没有使用示例，例如如何从 font.ttf 文件中解析一些相关信息。

这是 lib 的示例

有人对这个库有一些经验，可以给我一个起点吗？

问候和感谢

在“使用”字体名称时我必须期待哪些字符以及在“生成”字体名称时应该避免哪些字符？不同的操作系统、传统的桌面应用程序、移动或网络应用程序 (->CSS) 以及不同的字体格式（如 OpenType、TrueType、WOFF、PostScript、SVG 等）之间是否存在差异？

我有一种情况，我正在使用 Data-URIs 加载字体并且只想使用一种文件类型 WOFF。不使用后备字体也很重要，因此我正在寻找一种方法来检测 JavaScript 是否支持 WOFF。是否可以检测到 WOFF（不是 WOFF2）支持？

这个问题之前已经被问过（Detecting with Javascript是否 a Browser support Web Open Font Format (Woff) or not），但给出和接受的答案不是关于检测 WOFF 支持。

当您尝试下载字体 woff 格式时，我收到一个错误：

OTS 解析错误：WOFF 标头中的文件大小不正确

我究竟做错了什么 ？