如何通过CSS或JS列出SAP-icons的@font-face定义

一、用JavaScript枚举页面中所有@font-face规则 #

没有直接像window.getComputedStyle那样获取元素关联@font-face的API，但可以遍历页面所有样式表，筛选出目标字体的定义：

// 遍历所有样式表
Array.from(document.styleSheets).forEach(styleSheet => {
  try {
    // 遍历样式表中的所有规则
    Array.from(styleSheet.cssRules).forEach(rule => {
      // 筛选@font-face规则
      if (rule.type === CSSRule.FONT_FACE_RULE) {
        const fontFamily = rule.style.fontFamily;
        // 匹配目标字体名
        if (fontFamily.includes('SAP-icons')) {
          console.log('找到SAP-icons的@font-face定义：', rule);
          console.log('来源样式表：', styleSheet.href || '内联样式');
        }
      }
    });
  } catch (e) {
    // 跨域样式表会报错，跳过即可
    console.log('无法访问跨域样式表：', styleSheet.href);
  }
});

执行这段代码后，控制台会输出找到的@font-face规则及其来源，帮你定位定义位置。

二、Chrome开发者工具定位方法 #

1. 字体面板查看加载来源 #

• 打开Chrome DevTools（F12），点击右上角的「更多工具」→「字体」
• 在页面中点击你的图标元素，字体面板会显示该元素使用的字体，找到「SAP-icons」后，下方会显示字体文件的加载来源（对应的样式文件或URL）

2. 搜索@font-face规则 #

• 切换到「Sources」面板，在搜索框输入@font-face，筛选包含该规则的文件，逐个查看是否有SAP-icons的定义
• 或者在「Elements」面板的「Styles」标签页，搜索框输入SAP-icons，查看所有包含该字体名的样式规则，溯源到对应的样式文件

3. 网络面板追踪字体文件 #

• 切换到「Network」面板，筛选器选择「Font」类型
• 刷新页面，找到加载的SAP-icons.woff2文件，点击后查看「Initiator」列，就能看到发起这个字体请求的源文件（通常是某个CSS文件）

三、为什么移除自己的@font-face后图标仍显示？ #

大概率是你使用的框架（比如SAP UI5）、依赖的第三方库或页面引入的其他样式文件中，已经内置了SAP-icons的@font-face定义，所以即使你删除了自己写的，页面依然能加载到该字体。

内容的提问来源于stack exchange，提问作者Tina Chen