13

这是对这个问题的跟进。

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

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

Times New Roman, Georgia, Serif

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

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

4

3 回答 3

9

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

见http://www.lalit.org/lab/javascript-css-font-detect（存档）

于 2009-12-25T17:12:12.800 回答
3

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

于 2009-12-25T09:14:24.717 回答
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

于 2021-10-10T12:20:39.497 回答