在JavaScript中，这绝对是可能的。你只需要利用 getComputedStyle 来实现这一点。

达到要求的步骤：

1.获取p标记正在使用的字体的字体名称。
1.以数组形式获取与文档关联的所有css规则。
1.根据 * 步骤1* 过滤掉字体系列。
1.如果fontFaceRule存在，提取url并返回结果，否则返回null。
1.在这里，你可以用jest编写这个辅助函数的测试。

代码实现：

function getRenderedFontUrl(element) {
  const fontFamily = window.getComputedStyle(element).getPropertyValue('font-family').replace(/['"]/g, '');
  const cssRules = Array.from(document.styleSheets).flatMap(sheet => Array.from(sheet.cssRules));

  const fontFaceRule = cssRules.find(rule => {
    return rule.type === CSSRule.FONT_FACE_RULE && rule.style.getPropertyValue('font-family') === fontFamily;
  });
  

  if (fontFaceRule) {
    const src = fontFaceRule.style.getPropertyValue('src');
    const urlRegex = /url\((['"]?)(.*?)\1\)/g;
    const match = urlRegex.exec(src);
    return match ? match[2] : null;
  }

  return null;
}

// Usage example
const paragraphElement = document.querySelector('p');
const fontUrl = getRenderedFontUrl(paragraphElement);
console.log(fontUrl);

@font-face {
  font-family: 'MyFont';
  src: url('../../public/fonts/MyFont-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'MyFont';
  src: url('../../public/fonts/MyFont-Italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
}

.my-font-bold {
 font-family: 'MyFont';
 font-weight: bold;
 font-style: normal;
}

<p style="font-family: 'MyFont'; font-weight: bold;">

编写上述函数的测试：

import { JSDOM } from 'jsdom';
import { getRenderedFontUrl } from './path-where-you-defined';

const { window } = new JSDOM();
global.window = window;
global.document = window.document;

describe('getRenderedFontUrl', () => {
  beforeEach(() => {
    document.head.innerHTML = `
      <style>
        @font-face {
          font-family: 'MyFont';
          src: url('../../public/fonts/MyFont.woff2') format('woff2');
          font-weight: 300;
          font-style: normal;
        }

        p {
          font-family: 'MyFont';
        }
      </style>
    `;
  });

  it('should return font URL for an element with', () => {
    const pElement = document.createElement('p');
    document.body.appendChild(pElement);

    const fontUrl = getRenderedFontUrl(pElement);
    expect(fontUrl).toBe('../../public/fonts/MyFont.woff2');
  });

  it('should return null for an element without', () => {
    const divElement = document.createElement('div');
    document.body.appendChild(divElement);

    const fontUrl = getRenderedFontUrl(divElement);
    expect(fontUrl).toBeNull();
  });
});

型

在Web浏览器中没有直接访问呈现字体的文件名的方法。出于安全原因，在浏览器中运行的JavaScript被故意沙箱化，并且无法访问低级系统文件详细信息。如果需要验证特定元素上使用的字体以进行测试，可以使用JavaScript检查其计算样式。
下面的示例将检查元素的font-family：

const element = document.querySelector(".my-font-bold");
const computedStyle = window.getComputedStyle(element);
const fontFamily = computedStyle.getPropertyValue("font-family");

console.log("Computed font-family:", fontFamily);

字符串