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

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

碧海醫心

发布： 2025-12-02 14:48:20

原创

792人浏览过

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

本教程详细介绍了如何使用javascript的`cssstylesheet` api从用户上传的自定义css字体文件中动态解析并提取`@font-face`规则中的`font-weight`、`font-family`和`font-style`信息。这对于构建字体选择器或需要根据css内容动态显示可用字体属性的web编辑器非常有用，确保了即使面对未知css内容也能准确获取字体元数据。

引言：动态解析自定义字体CSS的需求

在现代Web开发中，尤其是在构建内容管理系统或可视化编辑器时，经常会遇到需要用户上传自定义字体文件（通常是.css文件，其中包含@font-face规则）的需求。为了在编辑器的字体选择器中准确显示这些字体的可用样式（例如，粗细、斜体），我们需要从这些CSS文件中动态地提取相关信息，特别是font-weight属性。直接通过正则表达式或字符串解析CSS文本复杂且容易出错，而JavaScript提供的CSSStyleSheet API则提供了一种更健壮、标准化的解决方案。

使用CSSStyleSheet API解析字体信息

CSSStyleSheet接口允许JavaScript程序化地操作和检查CSS样式表。通过将CSS文本导入到一个CSSStyleSheet实例中，我们可以访问其解析后的规则，从而轻松地提取所需信息。

核心原理

加载CSS文本： 首先，获取用户上传的CSS文件的文本内容。这通常通过FileReader或异步请求完成。
创建CSSStyleSheet实例： 使用new CSSStyleSheet()构造函数创建一个新的样式表对象。
同步替换CSS内容： 使用cssSheet.replaceSync(cssText)方法将获取到的CSS文本解析并加载到CSSStyleSheet实例中。此方法会同步解析CSS字符串，并用其内容替换样式表的所有CSS规则。
遍历CSS规则： cssSheet.cssRules属性返回一个CSSRuleList，其中包含样式表中的所有CSS规则。我们可以将其转换为数组并进行遍历。
识别@font-face规则： 在遍历过程中，通过检查每个规则的type属性来识别@font-face规则。CSSRule.FONT_FACE_RULE（或其数值表示5）表示一个@font-face规则。
提取字体属性： 对于每个识别出的@font-face规则，可以通过rule.style.getPropertyValue("propertyName")方法提取其font-family、font-style和font-weight等属性。

示例代码

以下JavaScript代码演示了如何实现上述逻辑：

Weights.gg

多功能的AI在线创作与交流平台

3352

查看详情

/**
 * 模拟用户上传或通过文件读取器获取的CSS内容
 */
let 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 API解析CSS文本并提取字体属性
 * @param {string} cssContent 要解析的CSS字符串
 * @returns {Array<Object>} 包含字体家族、字重和字形的对象数组
 */
async function extractFontProperties(cssContent) {
  const cssSheet = new CSSStyleSheet();
  try {
    await cssSheet.replace(cssContent); // 使用 replace 异步方法更稳健，或 replaceSync 同步
  } catch (error) {
    console.error("解析CSS内容时出错:", error);
    return [];
  }

  const fontProps = [];
  // 遍历所有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");

      fontProps.push({
        fontFamily: fontFamily.replace(/['"]/g, ''), // 移除字体名称中的引号
        fontWeight: fontWeight,
        fontStyle: fontStyle
      });
    }
  }
  return fontProps;
}

// 调用函数并打印结果
extractFontProperties(cssText).then(fontProperties => {
  console.log("提取到的字体属性：", fontProperties);

  // 如果只需要特定字体家族的font-weight列表，可以进一步处理
  const poppinsWeights = fontProperties
    .filter(prop => prop.fontFamily === 'Poppins')
    .map(prop => parseInt(prop.fontWeight, 10))
    .filter((value, index, self) => self.indexOf(value) === index) // 去重
    .sort((a, b) => a - b); // 排序

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

登录后复制

代码解析

cssText变量： 模拟了从用户上传文件或通过其他方式获取到的CSS字符串。
new CSSStyleSheet()： 创建了一个空的CSSStyleSheet实例。
cssSheet.replace(cssContent)： 这是一个异步方法，用于将CSS内容解析并加载到样式表中。它返回一个Promise，因此在实际应用中更推荐使用await进行等待，以确保CSS完全解析。如果需要同步操作且确定CSS内容不会太大，可以使用replaceSync(cssContent)。
cssSheet.cssRules： 这是一个类数组对象，包含了所有解析后的CSS规则。我们通过for...of循环遍历它。
rule.type === CSSRule.FONT_FACE_RULE： CSSRule.FONT_FACE_RULE是一个常量，其值为5，用于标识@font-face规则。这是识别字体定义的关键。
rule.style.getPropertyValue("...")： 对于每个@font-face规则，rule.style对象提供了访问其所有CSS声明的能力。getPropertyValue()方法用于获取指定CSS属性的值。
fontProps.push(...)： 将提取到的font-family、font-style和font-weight组合成一个对象，并添加到fontProps数组中。注意，font-family的值可能包含引号，示例中通过replace(/['"]/g, '')进行了清理。
进一步处理： 示例中还展示了如何从fontProps数组中筛选出特定字体（如'Poppins'）的所有font-weight，并进行去重和排序，以生成一个纯粹的数字列表，这正是许多字体选择器所需的最终数据格式。

注意事项与最佳实践

浏览器兼容性： CSSStyleSheet API，特别是replace()和replaceSync()方法，在现代浏览器中支持良好，但在一些旧版浏览器中可能存在兼容性问题。在使用前，建议查阅MDN或Can I use...来确认目标环境的兼容性。
错误处理： replace()和replaceSync()方法在解析无效CSS时可能会抛出错误。务必使用try...catch块来捕获并处理这些潜在的解析错误，以增强代码的健壮性。
性能考量： 对于非常大的CSS文件，replace()或replaceSync()的解析操作可能会有轻微的性能开销。在处理巨型CSS文件时，应考虑异步处理或Web Workers以避免阻塞主线程。
安全性： 如果是从用户上传的文件中读取CSS内容，虽然CSSStyleSheet本身不会执行恶意脚本，但CSS规则中的URL（如src属性）可能指向恶意资源。在将这些URL用于实际渲染之前，应进行适当的验证和清理。
@import规则： CSSStyleSheet API默认不会自动解析@import规则引入的外部样式表。如果自定义CSS文件中包含@import，您需要额外的逻辑来获取并解析这些外部文件。
font-weight值的多样性： font-weight不仅可以是数字（如100-900），也可能是关键字（如normal, bold）。在提取后，如果需要进行数值比较或排序，需要将关键字转换为对应的数值（normal通常为400，bold为700）。示例中通过parseInt()将数字字符串转换为整数。

总结

利用JavaScript的CSSStyleSheet API，我们可以高效、准确地从自定义CSS字体文件中提取@font-face规则中的关键信息，如font-family、font-style和font-weight。这种方法比手动字符串解析更为可靠和标准化，极大地简化了动态字体管理和UI构建的复杂性。通过结合错误处理和对浏览器兼容性的考量，开发者可以构建出功能强大且用户友好的字体选择器和编辑器。

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

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