当 base64 字体被视为未使用的 css 时，如何修复 pagespeed 分数

发布于 2025-01-13 21:08:24 字数 1020 浏览 3 评论 0原文

我将字体文件直接嵌入到 fontface 中的 css 文件中作为 base64。除了字体之外，我还有大约 150 行 css 行。

pagespeed 声称未使用 60.9 KiB 中的 60.5 KiB（gtmetrix 也是如此，但 60.4 中的 59.8 KiB）。将字体放在 html 中的 style 标签中（正如我一开始计划的那样）不会改变这种情况。

我相信由于这个问题，我的结果从 99-100 下降到 90。删除字体并复制所有样式直到文件大小相同就证明了这一点。有趣的是，所有这些重复项都不被视为未使用。我应该怎么办？

最小可重现示例（在 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>

原文

I embedded the font file directly into my css file in fontface as base64.
Besides the font, I have about 150 css lines there.

The pagespeed claims 60.5 KiB of 60.9 KiB is not used (gtmetrix too, but 59.8 of 60.4). Placing the font in html in style tag (as i planned at the beginning) does not change the situation.

I believe that because of this one problem, my result drops from 99-100 to 90. Removing the font and duplicating all styles until the file size is the same proves it. Interestingly, all these duplicates are not considered unused. What should I do?

Minimum reproducible example (paste real base64 in fontface src):

<!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>

分享到QQ

分享到微博