如何使用 JavaScript 检索计算的字体系列值？

使用 JavaScript 检索计算的字体系列

本文深入研究了之前查询的扩展，探索如何获取实际的字体名称DOM 元素，不包括任何后备。虽然通用的“计算样式”方法检索完整的字体字符串（包括后备），但我们的目标是隔离元素使用的特定字体。

为了实现这一点，我们利用现代提供的 getCompulatedStyle() 方法浏览器。以下代码片段说明了该方法：

<code class="javascript">let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);
let computedFontFamily = compStyles.getPropertyValue('font-family'); // e.g. "Times New Roman"</code>

在上面的示例中，para 表示目标段落元素。 getComputedStyle() 方法返回一个 CSSStyleDeclaration 对象 (compStyles)，其中包含元素的计算样式。要检索计算出的字体系列，请使用 getPropertyValue('font-family') 方法，该方法返回一个包含实际字体名称的字符串，不包括任何后备。

大多数主要浏览器都支持此方法，包括Chrome、Firefox、Safari 和 Edge。有关更多详细信息，请参阅 Mozilla 开发者网络文档：https://developer.mozilla.org/en-US/docs/Web/API/Window/getCompulatedStyle。

以上是如何使用 JavaScript 检索计算的字体系列值？的详细内容。更多信息请关注PHP中文网其他相关文章！