加載font-face之前img src

Question

給定一個簡單的HTML頁面由文本和幾個圖像標籤，CSS，但沒有任何Javascript，有沒有辦法告訴瀏覽器加載字體的URL在圖像源？

看起來很多瀏覽器都會等到第一次出現需要字體的標籤時才請求字體（source）。

然而，即使我把與style="font-family: 'libre_baskerville' !important"標籤在機身的最頂端，它沒有，直到已經要求標籤源的圖像後觸發的要求，爲在這裏看到：

這會導致瀏覽器（和HTTP規範本身）最大併發連接數達到相同域的問題。由於圖像首先被觸發，因此瀏覽器必須先加載圖像才能繪製文本。

作爲較大文件的圖像可能需要比font-face更長的下載時間。但是，文本通常更重要（當然，前幾行的文本比下面的圖像更重要）。

Answer 1

一對夫婦，我認爲是潛在的解決方案：

可能的解決方案＃1：

避免使用<img>標籤，並使用另一個標籤使用CSS background-image。它具有失去圖像標籤提供的語義含義的缺點。這也需要規則來設置標籤的寬度和高度以匹配圖像;這些維度可能都不知道，如果它們是更多維護。如果CSS沒有啓用，它也不起作用（儘管這可能不是一個大問題）。

換出的圖像與標籤各自具有background-image集允許按以下順序對網絡連接：

可能的解決方案＃2：

主機的字體（或，潛在地將圖像）在一個單獨的不同域。雖然這不會改變請求文件的順序，但它會阻止「最大併發連接到同一個域」問題。

這樣做的缺點是增加了依賴性（增加了停機時間，延遲等）的機會，並且不得不爲字體管理多個域。這也通過提供迴避問題的手段而不是回答 - 儘管它提供了實際結果。