JavaScript 解析自定义字体 CSS 文件提取字体权重教程

本文详细介绍如何使用 javascript 动态解析用户上传的自定义字体 css 文件，以识别其中包含的所有 `font-weight` 值。我们将利用 `cssstylesheet` api 读取 css 文本、遍历 `@font-face` 规则，并准确提取所需的字体权重信息，为前端编辑器或自定义字体功能提供数据支持。

理解 @font-face 规则与字体权重

在 Web 开发中，@font-face CSS 规则允许开发者指定自定义字体，即使该字体未安装在用户的计算机上。一个完整的 @font-face 规则通常包含 font-family、src、font-style 和 font-weight 等属性。其中，font-weight 属性定义了字体的粗细，可以是数字值（如 100 到 900，步长为 100）或关键字（如 normal、bold）。

当用户上传一个包含多个 @font-face 声明的 CSS 文件时，每个声明可能对应同一字体的不同粗细或样式变体。为了在前端编辑器中为用户提供正确的字体粗细选项，我们需要解析这些 CSS 规则，动态地获取所有可用的 font-weight 值。

使用 JavaScript CSSStyleSheet API 解析 CSS

JavaScript 提供了 CSSStyleSheet API，它允许我们以编程方式创建、修改和解析 CSS 样式表。这个 API 是处理动态 CSS 内容的强大工具，尤其适用于解析用户提供的 CSS 字符串。

核心步骤如下：

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

Otter.ai

一个自动的会议记录和笔记工具，会议内容生成和实时转录

91

查看详情

1. 创建 CSSStyleSheet 实例： 使用 new CSSStyleSheet() 创建一个新的样式表对象。
2. 同步替换 CSS 内容： 使用 replaceSync(cssText) 方法将用户提供的 CSS 文本解析并加载到样式表中。这是一个同步操作，适用于处理已知且不依赖于 DOM 渲染的 CSS 字符串。
3. 遍历 CSS 规则： 通过 cssSheet.cssRules 属性获取样式表中的所有 CSS 规则。这是一个 CSSRuleList 对象，可以转换为数组进行遍历。
4. 识别 @font-face 规则： 每个 CSS 规则都有一个 type 属性。对于 @font-face 规则，其 type 值为 5。
5. 提取 font-weight 属性： 对于识别出的 @font-face 规则，可以通过 rule.style.getPropertyValue("font-weight") 方法获取其 font-weight 值。

实现步骤与示例代码

以下是一个完整的 JavaScript 解决方案，演示如何从给定的 CSS 文本中提取所有 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');
  }

  /* 其他 CSS 规则，例如 body 样式 */
  body {
    margin: 0;
    padding: 0;
  }
`;

/**
 * 从 CSS 文本中提取所有 @font-face 规则的 font-weight
 * @param {string} cssContent 用户上传的 CSS 文件的文本内容
 * @returns {number[]} 包含所有唯一 font-weight 值的数组
 */
function getFontWeightsFromCss(cssContent) {
  const cssSheet = new CSSStyleSheet();
  try {
    // 同步解析 CSS 文本
    cssSheet.replaceSync(cssContent);
  } catch (error) {
    console.error("解析 CSS 文本时发生错误:", error);
    return []; // 解析失败则返回空数组
  }

  const fontWeights = new Set(); // 使用 Set 存储以自动去重

  // 遍历所有 CSS 规则
  for (const rule of cssSheet.cssRules) {
    // 检查规则类型是否为 @font-face (type === 5)
    if (rule.type === CSSRule.FONT_FACE_RULE) { // 或者直接使用数字 5
      const fontWeight = rule.style.getPropertyValue("font-weight");
      if (fontWeight) {
        // 将 font-weight 转换为数字并添加到 Set 中
        // 考虑 'normal' (400) 和 'bold' (700) 关键字
        let numericWeight = parseInt(fontWeight, 10);
        if (isNaN(numericWeight)) {
          if (fontWeight === 'normal') {
            numericWeight = 400;
          } else if (fontWeight === 'bold') {
            numericWeight = 700;
          }
        }
        if (!isNaN(numericWeight)) {
          fontWeights.add(numericWeight);
        }
      }
    }
  }

  // 将 Set 转换为排序后的数组
  return Array.from(fontWeights).sort((a, b) => a - b);
}

// 执行函数并打印结果
const availableFontWeights = getFontWeightsFromCss(cssText);
console.log("提取到的字体权重:", availableFontWeights);
// 预期输出: [200, 300, 400, 700]

代码解释：

1. cssText 变量模拟了用户上传的 CSS 文件内容。
2. getFontWeightsFromCss 函数接收 CSS 字符串作为参数。
3. new CSSStyleSheet() 创建一个内存中的样式表对象。
4. cssSheet.replaceSync(cssContent) 将提供的 CSS 字符串解析并加载到 cssSheet 中。为了健壮性，这里加入了 try...catch 块来捕获可能的解析错误。
5. new Set() 用于收集 font-weight 值，其优势在于能够自动去重，确保最终结果中每个权重值只出现一次。
6. for...of cssSheet.cssRules 迭代样式表中的所有规则。
7. rule.type === CSSRule.FONT_FACE_RULE (或 rule.type === 5) 判断当前规则是否为 @font-face 规则。
8. rule.style.getPropertyValue("font-weight") 获取 font-weight 属性的值。
9. 代码中增加了对 font-weight 关键字（normal 和 bold）的转换处理，将其映射到对应的数字值（400 和 700）。这是因为 CSS 允许使用这些关键字，而通常我们希望得到数字化的权重。
10. 最后，Array.from(fontWeights).sort() 将 Set 转换为数组并进行升序排序，以提供一个有序且唯一的字体权重列表。

注意事项

• 浏览器兼容性： CSSStyleSheet API（特别是 replaceSync 方法）在现代浏览器中支持良好，但在一些旧版浏览器中可能存在兼容性问题。在生产环境中使用前，请检查目标浏览器的兼容性列表。
• 安全性： 如果您允许用户上传任意 CSS 文件，务必对文件内容进行适当的验证和沙箱处理，以防止潜在的跨站脚本（XSS）或其他安全漏洞。尽管 CSSStyleSheet 在内存中操作，不会直接影响当前页面的样式，但解析恶意 CSS 仍然可能带来风险。
• 错误处理： 提供的示例代码包含了基本的 try...catch 来处理 replaceSync 可能抛出的解析错误。在实际应用中，您可能需要更详细的错误报告机制。
• 性能： 对于非常大的 CSS 文件，replaceSync 的同步特性可能会阻塞主线程。在处理巨型文件时，可能需要考虑异步解析或其他优化策略，例如将解析操作放在 Web Worker 中。
• font-weight 关键字： 记住 normal 对应 400，bold 对应 700。在前端界面展示时，可能需要将这些数字值再次映射回更友好的文本描述。
• 其他字体属性： 除了 font-weight，您还可以使用 rule.style.getPropertyValue() 方法提取 font-family、font-style 等其他 @font-face 属性，以满足更复杂的字体管理需求。

总结

通过利用 JavaScript 的 CSSStyleSheet API，我们可以高效且准确地解析用户上传的自定义字体 CSS 文件，从中提取出所有可用的 font-weight 值。这种方法提供了一种健壮的解决方案，能够为前端编辑器、字体选择器等功能提供动态数据支持，极大地增强了 Web 应用的灵活性和用户体验。在实际应用中，结合适当的错误处理、安全性考量和兼容性检查，可以构建出功能强大且稳定的自定义字体管理系统。

以上就是JavaScript 解析自定义字体 CSS 文件提取字体权重教程的详细内容，更多请关注php中文网其它相关文章！