Question

出于基于Javascript的自动未使用CSS清除的目的，我们正在寻找一种解决方案来检测页面上是否使用了@font-face块。

是否有一种简便的方法来验证HTML中是否使用了字体？

方法getComputedStyle()需要测试每个单独的HTML元素，并且效率不高。

<style>@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}</style>
<html> ... </html>
<script>function test_if_open_sans_is_used() { return; }</script>

Answer 1

没有可用于计算样式的API或CSS选择器。（Old example with jQuery）您唯一的选择是遍历整个DOM，或仅使用Chrome css coverage

如果您想自动化解决方案，可以随时extend Chrome Dev tools

Answer 2

document.fonts.check API可用于检测字体使用情况。它取决于字体字符串style weight size font-family。

要匹配Open-Sans-Italic：

document.fonts.check('italic 14px "Open Sans"');

Answer 3

这将有助于确定在给定网页上使用的所有字体。然后，您可以使用它来确定是否使用了目标字体。

const fontUnstack = (stack, size, style, weight) => {
    if (typeof stack === "string")
        stack = stack.match(/[^'",;\s][^'",;]*/g) || [];

    for (const family of stack) {
        if (document.fonts.check(style + ' ' + weight + ' ' + size + ' ' + family))
            return family;
    }
    console.log('undetected font', fontStyle, fontWeight, fontSize, fontFamily, el);
    return null;
};

const els = document.querySelectorAll('*');
let fonts = {};

for (const el of els) {
    const computedStyles = [
        window.getComputedStyle(el),
        window.getComputedStyle(el, '::before'),
        window.getComputedStyle(el, '::after')
    ];
    for (const computedStyle of computedStyles) {
        const fontFamily = computedStyle.getPropertyValue('font-family'),
              fontSize = computedStyle.getPropertyValue('font-size'),
              fontStyle = computedStyle.getPropertyValue('font-style'),
              fontWeight = computedStyle.getPropertyValue('font-weight'),
              usedFontFamily = fontUnstack(fontFamily, fontSize, fontStyle, fontWeight);

        if (usedFontFamily && !fonts.hasOwnProperty(usedFontFamily))
            fonts[usedFontFamily] = [];
        if (fonts[usedFontFamily].indexOf(fontStyle + ', ' + fontWeight) === -1)
            fonts[usedFontFamily].push(fontStyle + ', ' + fontWeight);
    }
}

console.log(fonts);

如何检测页面上是否未使用CSS @ font-face？

3 个答案: