是否可以获取元素的渲染字体的文件名?
范例:
@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
2条答案
按热度按时间kcrjzv8t1#
在JavaScript中,这绝对是可能的。你只需要利用
getComputedStyle
来实现这一点。达到要求的步骤:
1.获取
p
标记正在使用的字体的字体名称。1.以数组形式获取与文档关联的所有css规则。
1.根据 * 步骤1* 过滤掉字体系列。
1.如果fontFaceRule存在,提取
url
并返回结果,否则返回null
。1.在这里,你可以用jest编写这个辅助函数的测试。
代码实现:
编写上述函数的测试:
型
slhcrj9b2#
在Web浏览器中没有直接访问呈现字体的文件名的方法。出于安全原因,在浏览器中运行的JavaScript被故意沙箱化,并且无法访问低级系统文件详细信息。如果需要验证特定元素上使用的字体以进行测试,可以使用JavaScript检查其计算样式。
下面的示例将检查元素的font-family:
字符串