Question

获取浏览器最小字体大小的最佳方法是什么？我掀起了下面的代码，它执行二进制搜索。它有效，但我想知道是否有标准或更有效的方法。

function getMinimumFontSize() {
  var el = document.createElement('div');
  document.body.appendChild(el);
  el.innerHTML = "<div><p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p></div>";
  el.style.fontSize = '1px';
  el.style.width = '64px';
  var minimumHeight = el.offsetHeight;
  var least = 0;
  var most = 64;
  var middle; 
  for (var i = 0; i < 32; ++i) {
    middle = (least + most)/2;
    el.style.fontSize = middle + 'px';
    if (e.offsetHeight === minimumHeight) {
      least = middle;
    } else {
      most = middle;
    }
  }
  return middle;
}

设置样式并将其读回不起作用，因为它将返回设置而不是浏览器实际使用的设置。

我需要最小的字体大小，以便我可以动态地重新调整内容的大小，以便将所有内容保存在一个页面上，而无需滚动。如果浏览器忽略我的字体大小更改，那很难做到，因为我已经低于最小值。因此，对于这种情况，我会缩小其他内容，例如图形。

Answer 1

我是这样做的：

var ta = document.createElement('textarea');
ta.style.display = 'none';
ta.style.fontSize = '6px'; // I think this is the smallest possible, if not put smaller value
document.body.appendChild(ta); // needs to be part of DOM to be able to calculate
var minimumFontSize = window.getComputedStyle(ta, null).getPropertyValue('font-size'); // returns '20px' for me when I set minimum font size to 20px

编辑：这对firefox不起作用，所以我创建了一个新的，略有不同的方法：

var ta = document.createElement('div');
ta.style.fontSize = '6px';
ta.style.lineHeight = '1';
ta.innerHTML = 'a';
document.body.appendChild(ta);
var minimumFontSize = ta.clientHeight;

Answer 2

6年后，Chrome和Firefox允许的最小字体大小为零。这是我的基本方法，类似于此处第一个答案中的第一个示例：

element.style.fontSize = 0;
let actualMinSize = getComputedStyle(element).fontSize;

您必须去除计算结果中的“ px”以获取数字，并且必须显示该元素，但是可以通过position:absolute;使其不显示在屏幕上，这似乎现在在Chrome和Firefox中都适用，因此无需使用clientHeight解决方法AFAICT。

今年早些时候，在Chrome 73中，root em的空间大小设置和Chrome中的最小字体大小设置存在问题。从那时起，Chrome更改了其最小字体大小政策和用户界面。它们现在支持最小值为零，Firefox也是如此。

我的应用程序有一个用户可调整大小的窗口，可垂直滚动文本，并且元素的宽度是通过font-size间接设置的，因此元素越宽等于字体越大。如果用户尝试将窗口的大小设置为配置的最小字体大小以下，那么我需要将其作为最小元素宽度来处理。

尽管我可以将元素的字体大小设置为零，但是3px以下的字体大小是有问题的，因为字体大小越小，它与文本宽度的比例就越小，除了其他原因，我还没有完全调试过。在某个时候，请求的宽度减少1像素使我可以更改字体大小，但是<div> clientWidth冻结了：更改字体大小对宽度没有影响。减少2像素是可以的，因为更改较大，或者看起来。我可以在调试器的“监视”窗格中将style.width设置为所需的值，这使我摆脱了无休止的循环。

最奇怪的是，我可以在不同的字体大小/宽度下导致此问题，没有精确的引爆点。在更大范围内，小的变化是有问题的。它可能是Chrome的错误，但是无论如何我觉得尺寸小于3像素的尺寸似乎不太可能。我可能会在此元素中强制设置自己的最小值3px，以避开这些问题。

Javascript：如何获得浏览器的最小字体大小？

2 个答案: