javascript - 获取浏览器中渲染文本的确切字体，可能使用浏览器扩展

Question

<分区>

Answer 1

您可以使用 hack:主要思想是将内联元素的大小与某些给定字体进行比较。一个应该使用完整的字体系列值，另一个应该只使用一个字体系列。这是 a proof of concept效果很好。

// Look at the fiddle for full working code
function createFontTester(fontFamily) {
  var container = document.createElement('div');
  var tester = document.createElement('div');

  container.style.position = 'absolute';
  container.style.overflow = 'auto';
  container.style.visibility = 'hidden';

  tester.style.fontFamily = fontFamily;
  tester.style.display = 'inline';
  tester.style.visibility = 'hidden';

  // The size should be big enough to make a visual difference
  tester.style.fontSize = '100px'; 

  // Reset and prevent line breaks
  tester.style.fontWeight = 'normal';
  tester.style.fontStyle = 'normal';
  tester.style.letterSpacing = 'normal';
  tester.style.lineHeight = 'normal';
  tester.style.whiteSpace = 'nowrap';

  document.body.appendChild(container);
  container.appendChild(tester);

  return tester;
}

请注意，有些字体非常相似，以至于大多数字符占用相同的空间。以 Helvetica 和 Arial 为例:字符宽度基本相同，高度略有不同，所以我使用了大字体。

这种方法可能不是万无一失的，但它适用于我能想到的所有字体系列。

更新:我做了this little library在 Github 上处理更多用例。