在JavaScript中获取计算字体系列

Question

这是这个问题的后续内容.

我正在研究CKEditor的一个组件,这是一个字体下拉菜单的调整版本,它总是显示当前选择的字体系列/大小值,无论它们在何处定义,使用computedStyle和配合.

正如您在其他问题中所看到的,确定字体大小现在可以跨浏览器工作.现在我无法使用该fontFamily属性.我的通用"计算样式"函数仅返回已定义的完整字体字符串,例如

Times New Roman, Georgia, Serif

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

这可以以某种方式完成,至少对于最常见的Web字体？

Answer 1

我认为没有任何方法可以直接进行,但Lalit Patel提出了一种巧妙的技术,可以创建一个带有一些字母的元素,并从元素的宽度猜测字体.

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

Answer 2

下面是使用 JavaScript 从 DOM 获取计算出的字体系列的方法：

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/getCompulatedStyle

Answer 3

UA 选择列表中发现的第一个已安装字体。操作系统上安装的字体实际上并不是 DOM 的一部分，因此您能做的最好的就是猜测。