在img src之前加载font-face

Question

鉴于一个简单的HTML页面由文本和几个图像标签组成，使用CSS，但没有任何Javascript，是否有办法告诉浏览器在图像源之前加载字体 - 面部URL？

似乎许多浏览器会在请求字体（source）之前等到第一次出现需要font-family的标记。

但是，即使我将style="font-family: 'libre_baskerville' !important"的标记放在正文的最顶部，它也不会触发请求，直到请求图像标记源之后，如下所示：

这会导致浏览器出现问题＆＃39; （和HTTP规范本身）到同一域的最大并发连接。由于首先触发图像，因此浏览器必须先加载图像才能绘制文本。

图像是较大的文件，下载时间比字体更长。但是，文本通常更重要（当然，前几行中的文本比低于首屏的图像更重要。）

Answer 1

我考虑过的几个潜在解决方案：

可能的解决方案＃1：

避免使用<img>标记，并使用带有CSS background-image的其他标记。它具有失去图像标签提供的语义含义的缺点。这还需要规则来设置标签的宽度和高度以匹配图像;这些尺寸可能都不为人所知，如果它们仍然需要维护。如果未启用CSS，它也将无法工作（尽管这可能不是一个大问题）。

使用每个都设置了background-image的标记替换图像，可以按以下顺序进行网络连接：

可能的解决方案＃2：

在单独的不同域上托管字体（或可能是图像）。虽然这不会改变请求文件的顺序，但它会阻止“同一域的最大并发连接”问题。

这样做的缺点是添加依赖项（增加停机时间，延迟等），以及只需为字体管理多个域。这也通过提供避免问题的手段而不是答案而作弊 - 尽管它提供了实际结果。