如何知道瀏覽器將使用哪個 unicode-range 來預加載字體？

Question

我從 CSS 文件中搜索預加載 fonts。

Css Files cut the font by unicode-range : 挺好的，只加載了我想要的那部分字體。

但是：我想預加載（在這個 CSS 文件之前）字體將被瀏覽器使用。 而且我不知道如何知道我應該預加載的字體是什么？

前任：

<head>
    <!-- Which font ? a.woof2 / b.woff2 or c.woff2 ? -->
    <link rel="preload" href="fonts/myFont_x.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <!-- other elements -->
    <link rel="stylesheet" href="mystyleFont.css">
</head>

css 文件（mystyleFont.css）：

@font-face {
  font-family: 'myFont';
  font-display: swap;
  src: url(https://example.com/a.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; // That is the unicode-range
}

@font-face {
  font-family: 'myFont';
  font-display: swap;
  src: url(https://example.com/b.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129;
}

@font-face {
  font-family: 'myFont';
  font-display: swap;
  src: url(https://example.com/c.woff2) format('woff2');
  unicode-range: U+0460-052F;
}

在此示例中，如果瀏覽器使用 unicode-range U+0460-052F c.woff2我只想預加載c.woff2 ...

而且我不想在我的頁面上預加載所有 fonts 。

你有什么想法嗎？

謝謝！

Answer 1

如Mozilla 文檔中所述：

如果頁面不使用此范圍內的任何字符，則不會下載字體； 如果它至少使用一個，則下載整個字體。

需要說明的是，它仍會在需要時下載整個文件。 不只是其中的一部分。

unicode-range行為的一些精確度：

它只會更改范圍內字符的字體，即使 css 應用於整個元素
它只會在范圍內的字符出現時加載字體，這將重新加載所有受影響元素的樣式，即使它們沒有字符但樣式已附加。 這將在頁面中顯示為閃爍，閃爍持續時間是獲取字體的時間
使用preload將確保頁面的樣式重新加載閃爍持續時間最短
使用preload必須包括as=和type=否則字體將被重新下載

當你說：

如果瀏覽器使用 unicode-range U+0460-052F，我只想預加載 c.woff2 ...

對於支持該屬性的瀏覽器（除IE外的所有最新瀏覽器），當至少需要顯示范圍內的一個字符時，字體將被完整下載。 但是preload會在頁面加載時發生，因此css屬性尚未加載，導致下載所有標記為preload的 fonts 。 使用您當前的配置，如果您刪除preload ，則只會獲取頁面中實際使用的字體。

要擴展答案，您還可以通過刪除字形來減小字體大小（此處有一些示例）。 這意味着您可以將字體切割成碎片並使用 css 的屬性unicode-range檢索相關部分。

請注意，如果您的字體不是很大（超過幾Mb ），則此優化是過度的，您應該關注其他選項（緩存， http的壓縮， http2的多路復用，...）

如何知道瀏覽器將使用哪個 unicode-range 來預加載字體？

問題描述

1 個解決方案

解決方案1
1 2020-12-23 12:59:33

如何知道瀏覽器將使用哪個 unicode-range 來預加載字體？

問題描述

1 個解決方案

解決方案1 1 2020-12-23 12:59:33

解決方案1
1 2020-12-23 12:59:33