Jest.js 如何获取渲染字体CSS的文件名?

f3temu5u  于 2023-11-15  发布在  Jest
关注(0)|答案(2)|浏览(141)

是否可以获取元素的渲染字体的文件名?
范例:

@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;
}

字符串
第一个月
在这个例子中,我想得到../../public/fonts/MyFont-Bold.woff2的元素(因为它有font-weight bold和font-family =“MyFont”,感谢className“my-font-bold”)。
PS:我想这样做,使字体Vitest测试。
CodeSandbox:https://codesandbox.io/p/sandbox/magical-flower-q87vz7?file=%2Fapp%2Ffont.test.tsx%3A27%2C2

kcrjzv8t

kcrjzv8t1#

在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();
  });
});

slhcrj9b

slhcrj9b2#

在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);

字符串

相关问题