在 JavaScript 中获取计算的字体系列答案

【问题标题】：Get computed font-family in JavaScript在 JavaScript 中获取计算的字体系列
【发布时间】：2010-12-29 23:16:15
【问题描述】：

我正在为CKEditor 开发一个组件，这是字体下拉菜单的一个调整版本，它始终显示当前选择的字体系列/大小值，无论它们是在哪里定义的，使用computedStyle 和 consorts .

正如您在另一个问题中看到的，确定字体大小现在可以跨浏览器工作。现在我无法使用fontFamily 属性。我的通用“计算样式”函数仅返回已定义的完整字体字符串，例如

Times New Roman, Georgia, Serif

为了使设置与字体系列下拉列表中的条目相匹配，我需要的是 DOM 元素的 实际字体 的 固定字体名称我正在检查。

这可以通过某种方式完成吗，至少对于最常见的网络字体而言？

【问题讨论】：

标签： javascript css computed-style

【解决方案1】：

UA 选择列表中它发现已安装的第一个字体。操作系统上安装的字体并不是真正的 DOM 的一部分，所以你能做的最好的就是猜测。

【讨论】：

你是对的。 Paul D. Waite 提出了一种解决方法，我不打算在这种情况下使用，但可以解决它。

【解决方案2】：

我不认为有任何方法可以直接做到这一点，但 Lalit Patel 想出了一种巧妙的技术，可以创建一个包含一些字母的元素，并根据元素的宽度猜测字体。

见http://www.lalit.org/lab/javascript-css-font-detect (archive)

【讨论】：

是的，我也想到了这一点，这是一个非常聪明的想法。然而，在我的情况下，这是矫枉过正的，因为每次用户在所见即所得编辑器中更改光标位置时，整个过程都必须发生。
啊，是的。我不熟悉 CKEditor，但是有什么方法可以跟踪哪些样式应用于哪些文本？不是在光标移动时计算它，而是记录用户更改文本时应用到文本的样式？
@Pekka 那么你需要记忆检测的结果。而且，也许，还可以预先测试一些常见的字体。

【解决方案3】：

这个帖子已经有 12 年的历史了，但由于它仍然出现在搜索中，这里有一种方法可以从 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

【讨论】：

这将返回如下内容：Segoe UI, Helvetica Neue, Helvetica, sans-serif。有没有办法限制只返回Segou UI（第一种字体）？