检测实际使用的字体

在 CSS 中，font-family​ 属性通常包含多个字体作为后备选项。浏览器会从左到右依次尝试使用这些字体，直到找到一个可用的字体为止。因此，实际使用的字体通常是列表中第一个在用户系统上可用的字体。

要确定浏览器实际使用的是哪个字体，你可以使用 JavaScript 来检测。以下是一个简单的方法来确定当前元素使用的实际字体：

function getActualFontFamily(element) {
    const computedStyle = window.getComputedStyle(element, null);
    const fontFamily = computedStyle.getPropertyValue('font-family');
    const testString = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    const defaultFont = 'monospace'; // 使用一个几乎所有系统都有的字体作为对比

    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');

    function getTextWidth(font, text) {
        context.font = `40px ${font}`;
        return context.measureText(text).width;
    }

    const defaultWidth = getTextWidth(defaultFont, testString);

    // 拆分 font-family 列表，并依次测试每个字体
    const fonts = fontFamily.split(',').map(font => font.trim().replace(/^["']|["']$/g, ''));
    for (const font of fonts) {
        const width = getTextWidth(font, testString);
        if (width !== defaultWidth) {
            return font;
        }
    }

    // 如果所有字体都不可用，返回最后一个后备选项
    return fonts[fonts.length - 1];
}

// 使用方法
const element = document.querySelector('your-element-selector'); // 替换为你要检测的元素选择器
const actualFont = getActualFontFamily(element);
console.log('实际使用的字体:', actualFont);

这个方法通过创建一个画布并测量特定字符串的宽度来确定实际使用的字体。它首先测量一个默认字体（例如 monospace​）的宽度，然后依次测量每个候选字体的宽度。如果某个字体的宽度与默认字体不同，则认为该字体是实际使用的字体。

请注意，这种方法不是百分之百准确，但在大多数情况下可以提供一个合理的估计。

‍