javascript - 在 JavaScript 中获取计算的字体系列

标签 javascript css computed-style

这是 this question 的跟进.

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

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

Times New Roman, Georgia, Serif

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

这能以某种方式完成吗,至少对于最常见的网络字体?

最佳答案

这是一种使用 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/getComputedStyle

关于javascript - 在 JavaScript 中获取计算的字体系列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1960817/

相关文章:

javascript - 第 105 行 :14: 'accountSelector' is not defined no-undef

javascript - 如何在 Angular js/HTML 中处理数组

javascript - 如何在窗口调整大小时覆盖我的数组?

jquery - 是否可以使用伪元素使包含元素环绕绝对定位元素(如 clearfix)?

css - 元素样式与计算样式具有不同的值

javascript - 基于相同键链接数组数据

javascript - 无法在现有状态转换期间更新(例如在 `render` 内)

html - 容器 100% 并正在扩展

css - Chrome 计算样式不正确