當 base64 字體被視為未使用時，如何修復 pagespeed 分數 css

Question

我將字體文件直接嵌入到我的 css 文件中，字體為 base64。除了字體，我還有大約 150 行 css 行。

pagespeed 聲稱 60.5 KiB 的 60.9 KiB 未使用（gtmetrix 也是，但 59.8 的 60.4）。 將字體放在樣式標簽中的 html 中（正如我一開始計划的那樣）並沒有改變這種情況。

我相信由於這個問題，我的結果從 99-100 下降到 90。刪除字體並復制所有 styles 直到文件大小相同證明了這一點。 有趣的是，所有這些重復項都不被視為未使用。 我應該怎么辦？

最小可重現示例（在 fontface src 中粘貼真實的 base64）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>font test</title>
    <style>
        @font-face {
            font-family: 'b64';
            font-weight: bold;
            src: url("data:application/octet-stream;base64,AAEAA [...rest of font file]");
        }
        body {
            font-family: "b64";
            font-weight: bold;
        }
    </style>
</head>

<body>
    font test
</body>
</html>

Answer 1

嘗試將 MIME 類型設置為以下之一：ont/otf
應用程序/字體otf
應用程序/字體
應用程序/otf
應用程序/x-font-otf

當 base64 字體被視為未使用時，如何修復 pagespeed 分數 css

問題描述

1 個解決方案

解決方案1
0 2022-04-22 06:54:18

當 base64 字體被視為未使用時，如何修復 pagespeed 分數 css

問題描述

1 個解決方案

解決方案1 0 2022-04-22 06:54:18

解決方案1
0 2022-04-22 06:54:18