从CSS文件提取自定义字体font-weight的JavaScript教程

/**
 * 从CSS文本中提取所有@font-face规则的字体属性。
 * 特别是font-family, font-style, font-weight。
 *
 * @param {string} cssText 包含@font-face规则的CSS字符串。
 * @returns {Array<Object>} 包含字体属性对象的数组，每个对象包含fontFamily, fontWeight, fontStyle。
 */
function extractFontPropertiesFromCss(cssText) {
    // 1. 创建一个新的CSSStyleSheet实例
    // 这是一个内存中的样式表，不会影响当前文档的样式
    let cssSheet = new CSSStyleSheet();

    try {
        // 2. 将CSS文本同步加载到样式表中
        // replaceSync方法会解析CSS文本并构建内部的CSSRuleList
        cssSheet.replaceSync(cssText);
    } catch (error) {
        console.error("解析CSS文本时发生错误:", error);
        // 如果CSS文本格式不正确，replaceSync可能会抛出错误
        return [];
    }

    // 存储提取到的字体属性
    let fontProperties = [];

    // 3. 遍历样式表中的所有CSS规则
    // cssRules是一个CSSRuleList，可以通过扩展运算符转换为数组以便使用forEach
    let rules = [...cssSheet.cssRules];

    rules.forEach((rule) => {
        // 4. 识别出类型为@font-face的规则
        // CSSRule.FONT_FACE_RULE 的值为 5
        if (rule.type === CSSRule.FONT_FACE_RULE) {
            // 类型断言，确保rule是CSSFontFaceRule
            const fontFaceRule = rule;

            // 5. 从@font-face规则中提取所需的属性
            // rule.style 是一个CSSStyleDeclaration对象，用于访问CSS属性
            let fontFamily = fontFaceRule.style.getPropertyValue("font-family");
            let fontStyle = fontFaceRule.style.getPropertyValue("font-style");
            let fontWeight = fontFaceRule.style.getPropertyValue("font-weight");

            // 将提取到的属性添加到结果数组中
            fontProperties.push({
                fontFamily: fontFamily.replace(/['"]/g, ''), // 移除字体名称的引号
                fontWeight: fontWeight,
                fontStyle: fontStyle
            });
        }
    });

    return fontProperties;
}

// 示例用法：
const userCssInput = `
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmv1pVF9eOYktMqg.woff2) format('woff2');
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLm21lVFteOYktMqlap.woff2) format('woff2');
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiGyp8kv8JHgFVrJJLucHtAOvWDSA.woff2) format('woff2');
}
/* latin-ext */
@font-face {
  font-family: 'Agdasima';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/agdasima/v2/PN_0Rfyxp2f1fUCgAPCGgCza3v3xzHMj54Y.woff2) format('woff2');
}
`;

const extractedFonts = extractFontPropertiesFromCss(userCssInput);
console.log("提取到的字体属性:", extractedFonts);

// 如果只需要某个特定字体家族的所有font-weight
const poppinsWeights = extractedFonts
    .filter(font => font.fontFamily === 'Poppins')
    .map(font => parseInt(font.fontWeight, 10))
    .filter((value, index, self) => self.indexOf(value) === index) // 去重
    .sort((a, b) => a - b); // 排序

console.log("Poppins 字体可用的 font-weight:", poppinsWeights); // 预期输出: [200, 300, 400]