提问人：Pekka 提问时间：12/25/2009 最后编辑：CommunityPekka 更新时间：7/20/2022 访问量：9930
在 JavaScript 中获取计算的字体系列
Get computed font-family in JavaScript
问：
这是这个问题的后续。
我正在开发 CKEditor 的一个组件，这是字体下拉菜单的调整版本，始终显示当前选择的字体系列/大小值，无论它们在哪里定义、使用和组合。computedStyle
正如您在另一个问题中看到的，确定字体大小现在可以跨浏览器使用。现在我在处理该属性时遇到了问题。我的通用“计算样式”函数仅返回已定义的完整字体字符串，例如fontFamily
Times New Roman, Georgia, Serif
为了将设置与字体系列下拉列表中的条目相匹配，我需要的是我正在检查的 DOM 元素的实际字体的固定字体名称。
至少对于最常见的 Web 字体，可以以某种方式做到这一点吗？
答：
3赞
Azeem.Butt
12/25/2009
#1
UA 在列表中选取它找到已安装的第一个字体。操作系统上安装的字体并不是 DOM 的一部分，所以你能做的最好的事情就是猜测。
评论
0赞
Pekka
12/26/2009
你是对的。Paul D. Waite 提出了一种我不打算在这种情况下使用的解决方法，但可以对其进行整理。
7赞
Augusto
10/10/2021
#2
以下是从 DOM 获取使用 JavaScript 计算的字体系列的方法：
let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);
let computedFontFamily = compStyles.getPropertyValue('font-family') // e.g. "Times New Roman"
来源：https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
评论
1赞
rudtek
1/7/2022
这将返回如下内容： .有没有办法将返回限制为仅（第一种字体）？Segoe UI, Helvetica Neue, Helvetica, sans-serifSegou UI
0赞
aetonsi
8/8/2023
2023 年检查：有没有办法获取实际加载和渲染的字体名称？
1赞
aetonsi
8/8/2023
@rudtek，如果您只需要列表中的第一个，则只需将字符串拆分为逗号即可。如果您需要加载实际的字体（在非 Windows 设备上不存在），我认为这仍然是不可能的......segoe ui
评论