从自定义CSS文件中提取可用字体粗细的实用指南

@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 200; /* 这里的200就是一个粗细值 */
  src: url(font-light-italic.woff2) format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400; /* 这里的400是另一个粗细值 */
  src: url(font-regular.woff2) format('woff2');
}

/**
 * 假设这是从用户上传文件或输入中获取的CSS内容
 */
const cssText = `
  /* 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');
  }
`;

/**
 * 使用 CSSStyleSheet 解析 CSS 文本
 */
async function parseFontWeights(cssContent) {
  const cssSheet = new CSSStyleSheet();
  try {
    // 同步替换 CSS 内容
    await cssSheet.replaceSync(cssContent);
  } catch (error) {
    console.error("解析CSS失败:", error);
    return [];
  }

  const fontProperties = [];
  // 遍历所有 CSS 规则
  for (const rule of cssSheet.cssRules) {
    // 检查规则类型是否为 @font-face (type 5)
    if (rule.type === CSSRule.FONT_FACE_RULE) { // 或者直接使用数字 5
      const fontFamily = rule.style.getPropertyValue("font-family");
      const fontStyle = rule.style.getPropertyValue("font-style");
      const fontWeight = rule.style.getPropertyValue("font-weight");

      fontProperties.push({
        fontFamily: fontFamily.replace(/['"]/g, ''), // 移除引号
        fontStyle: fontStyle,
        fontWeight: parseInt(fontWeight, 10) || fontWeight // 尝试转换为数字，否则保留字符串
      });
    }
  }
  return fontProperties;
}

// 调用函数并处理结果
parseFontWeights(cssText).then(fontProps => {
  console.log("提取到的所有字体属性:", fontProps);

  // 进一步处理，例如获取 'Poppins' 字体所有独特的 font-weight
  const poppinsWeights = fontProps
    .filter(prop => prop.fontFamily === 'Poppins')
    .map(prop => prop.fontWeight);

  const uniquePoppinsWeights = [...new Set(poppinsWeights)].sort((a, b) => a - b);
  console.log("Poppins 字体可用的粗细:", uniquePoppinsWeights); // 期望输出: [200, 300, 400]

  // 获取 'Agdasima' 字体所有独特的 font-weight
  const agdasimaWeights = fontProps
    .filter(prop => prop.fontFamily === 'Agdasima')
    .map(prop => prop.fontWeight);

  const uniqueAgdasimaWeights = [...new Set(agdasimaWeights)].sort((a, b) => a - b);
  console.log("Agdasima 字体可用的粗细:", uniqueAgdasimaWeights); // 期望输出: [700]
});