本教程详细介绍了如何利用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规则。
立即学习“前端免费学习笔记（深入）”；
CSSStyleSheet对象可以通过两种主要方式创建：
- 通过<style>或<link>标签加载的样式表（document.styleSheets）。
- 通过构造函数new CSSStyleSheet()创建的“可构造样式表”（Constructable Stylesheets）。
对于动态加载和解析用户提供的CSS文本，可构造样式表是一个理想的选择，因为它允许我们在不实际插入到DOM中的情况下解析CSS，从而避免了不必要的渲染副作用。
实现步骤
以下是使用CSSStyleSheet API提取字体粗细的具体步骤：
- 获取CSS文本： 假设我们已经通过FileReader或input元素获取到了用户上传的CSS文件的文本内容。
- 创建 CSSStyleSheet 实例： 使用new CSSStyleSheet()创建一个新的样式表对象。
- 同步替换内容： 使用replaceSync()方法将CSS文本内容同步地加载到CSSStyleSheet实例中。
- 遍历CSS规则： 访问cssSheet.cssRules属性，它返回一个包含所有CSS规则的CSSRuleList。
- 识别 @font-face 规则： 遍历cssRules，检查每个规则的type属性。@font-face规则的type值为5。
- 提取字体属性： 对于每个@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]
});注意事项与最佳实践
- 错误处理： replaceSync()方法在解析无效CSS时会抛出错误。在实际应用中，应使用try...catch块来捕获并处理这些错误，以提高程序的健壮性。
- font-family的引号： getPropertyValue("font-family")返回的字体名称可能包含引号（单引号或双引号）。在比较或显示字体名称时，通常需要移除这些引号。
- font-weight的类型： getPropertyValue("font-weight")返回的是字符串。如果需要进行数值比较或排序，应将其转换为数字类型（例如使用parseInt()）。
- CSSRule.FONT_FACE_RULE： 使用CSSRule.FONT_FACE_RULE常量（值为5）来检查规则类型比直接使用数字更具可读性和维护性。
- 浏览器兼容性： CSSStyleSheet API在现代浏览器中得到了广泛支持。对于旧版浏览器，可能需要考虑其他降级方案（尽管对于自定义字体编辑器这类应用，通常可以假定使用现代浏览器）。
- 性能： 对于非常大的CSS文件，replaceSync()和遍历cssRules可能会有一定性能开销。但在大多数用户上传的自定义字体CSS场景中，这通常不是问题。
- 安全性： 如果处理的是来自不可信源的CSS文件，请确保在服务器端对文件内容进行必要的验证和清理，以防止潜在的注入攻击或其他恶意行为。尽管CSSStyleSheet API本身在浏览器环境中解析是安全的，但如果CSS中包含恶意URL或脚本，可能会带来其他风险。
总结
通过利用CSSStyleSheet API，我们可以可靠且高效地从动态加载的CSS文件中提取@font-face规则中定义的字体属性，特别是font-weight。这种方法避免了复杂的字符串解析，提供了结构化的数据访问，使得在Web应用程序中实现高级的字体管理功能变得更加简单和健壮。
