本文详细介绍如何使用 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免费学习笔记（深入）”；
- 创建 CSSStyleSheet 实例： 使用 new CSSStyleSheet() 创建一个新的样式表对象。
- 同步替换 CSS 内容： 使用 replaceSync(cssText) 方法将用户提供的 CSS 文本解析并加载到样式表中。这是一个同步操作，适用于处理已知且不依赖于 DOM 渲染的 CSS 字符串。
- 遍历 CSS 规则： 通过 cssSheet.cssRules 属性获取样式表中的所有 CSS 规则。这是一个 CSSRuleList 对象，可以转换为数组进行遍历。
- 识别 @font-face 规则： 每个 CSS 规则都有一个 type 属性。对于 @font-face 规则，其 type 值为 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]代码解释：
- cssText 变量模拟了用户上传的 CSS 文件内容。
- getFontWeightsFromCss 函数接收 CSS 字符串作为参数。
- new CSSStyleSheet() 创建一个内存中的样式表对象。
- cssSheet.replaceSync(cssContent) 将提供的 CSS 字符串解析并加载到 cssSheet 中。为了健壮性，这里加入了 try...catch 块来捕获可能的解析错误。
- new Set() 用于收集 font-weight 值，其优势在于能够自动去重，确保最终结果中每个权重值只出现一次。
- for...of cssSheet.cssRules 迭代样式表中的所有规则。
- rule.type === CSSRule.FONT_FACE_RULE (或 rule.type === 5) 判断当前规则是否为 @font-face 规则。
- rule.style.getPropertyValue("font-weight") 获取 font-weight 属性的值。
- 代码中增加了对 font-weight 关键字（normal 和 bold）的转换处理，将其映射到对应的数字值（400 和 700）。这是因为 CSS 允许使用这些关键字，而通常我们希望得到数字化的权重。
- 最后，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 应用的灵活性和用户体验。在实际应用中，结合适当的错误处理、安全性考量和兼容性检查，可以构建出功能强大且稳定的自定义字体管理系统。
