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

本教程详细介绍了如何利用javascript动态解析用户上传的css文件，以准确识别其中`@font-face`规则定义的字体粗细（`font-weight`）。通过使用`cssstylesheet` api，我们可以高效地提取字体家族、样式和粗细信息，这对于构建自定义字体选择器或编辑器功能至关重要，确保了用户界面的准确性和灵活性。

识别自定义字体CSS中的字体粗细

在开发需要处理自定义字体的Web应用程序时，例如字体编辑器或主题定制工具，经常需要从用户上传的CSS文件中动态获取可用的字体变体信息。其中一个关键需求是识别特定字体家族所支持的所有font-weight值，以便在用户界面中提供准确的选项列表。本教程将详细介绍如何使用JavaScript解析CSS内容，并从中提取这些重要的字体属性。

@font-face规则与字体属性

CSS中的@font-face规则是定义自定义字体的核心机制。它允许网页开发者指定字体文件的位置、字体家族名称、样式（如normal、italic）以及最重要的粗细（font-weight）。font-weight属性可以使用关键字（如normal, bold）或数值（100到900，步长为100）来定义。例如：

@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');
}

当用户上传一个包含多个@font-face定义的CSS文件时，我们的目标就是解析这些规则，并收集所有出现的font-weight值。

使用 CSSStyleSheet API 解析CSS

直接使用正则表达式解析复杂的CSS字符串通常是不可靠且难以维护的。幸运的是，现代浏览器提供了CSSStyleSheet API，这是一个强大的工具，允许JavaScript以结构化的方式访问和操作CSS样式表。我们可以利用这个API来解析CSS文本，并遍历其内部的CSS规则。

立即学习“前端免费学习笔记（深入）”；

标小兔AI写标书

一款专业的标书AI代写平台，提供专业AI标书代写服务，安全、稳定、速度快，可满足各类招投标需求，标小兔，写标书，快如兔。

下载

CSSStyleSheet对象可以通过两种主要方式创建：

1. 通过
2. 通过构造函数new CSSStyleSheet()创建的“可构造样式表”（Constructable Stylesheets）。

对于动态加载和解析用户提供的CSS文本，可构造样式表是一个理想的选择，因为它允许我们在不实际插入到DOM中的情况下解析CSS，从而避免了不必要的渲染副作用。

实现步骤

以下是使用CSSStyleSheet API提取字体粗细的具体步骤：

1. 获取CSS文本： 假设我们已经通过FileReader或input元素获取到了用户上传的CSS文件的文本内容。
2. 创建 CSSStyleSheet 实例： 使用new CSSStyleSheet()创建一个新的样式表对象。
3. 同步替换内容： 使用replaceSync()方法将CSS文本内容同步地加载到CSSStyleSheet实例中。
4. 遍历CSS规则： 访问cssSheet.cssRules属性，它返回一个包含所有CSS规则的CSSRuleList。
5. 识别 @font-face 规则： 遍历cssRules，检查每个规则的type属性。@font-face规则的type值为5。
6. 提取字体属性： 对于每个@font-face规则，我们可以通过其style属性（一个CSSStyleDeclaration对象）来获取font-family、font-style和font-weight等值。

示例代码

/**
 * 假设这是从用户上传文件或输入中获取的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]
});

注意事项与最佳实践

1. 错误处理： replaceSync()方法在解析无效CSS时会抛出错误。在实际应用中，应使用try...catch块来捕获并处理这些错误，以提高程序的健壮性。
2. font-family的引号： getPropertyValue("font-family")返回的字体名称可能包含引号（单引号或双引号）。在比较或显示字体名称时，通常需要移除这些引号。
3. font-weight的类型： getPropertyValue("font-weight")返回的是字符串。如果需要进行数值比较或排序，应将其转换为数字类型（例如使用parseInt()）。
4. CSSRule.FONT_FACE_RULE： 使用CSSRule.FONT_FACE_RULE常量（值为5）来检查规则类型比直接使用数字更具可读性和维护性。
5. 浏览器兼容性： CSSStyleSheet API在现代浏览器中得到了广泛支持。对于旧版浏览器，可能需要考虑其他降级方案（尽管对于自定义字体编辑器这类应用，通常可以假定使用现代浏览器）。
6. 性能： 对于非常大的CSS文件，replaceSync()和遍历cssRules可能会有一定性能开销。但在大多数用户上传的自定义字体CSS场景中，这通常不是问题。
7. 安全性： 如果处理的是来自不可信源的CSS文件，请确保在服务器端对文件内容进行必要的验证和清理，以防止潜在的注入攻击或其他恶意行为。尽管CSSStyleSheet API本身在浏览器环境中解析是安全的，但如果CSS中包含恶意URL或脚本，可能会带来其他风险。

总结

通过利用CSSStyleSheet API，我们可以可靠且高效地从动态加载的CSS文件中提取@font-face规则中定义的字体属性，特别是font-weight。这种方法避免了复杂的字符串解析，提供了结构化的数据访问，使得在Web应用程序中实现高级的字体管理功能变得更加简单和健壮。