Javascript: 我如何获取浏览器的最小字体大小？

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;
}

仅仅设置样式并将其读取回来是不起作用的，因为它会返回设置而非浏览器实际使用的内容。我需要最小字体大小，以便可以动态重新调整内容大小，使所有内容都在一页上而无需滚动。如果浏览器忽略了我的字体大小更改，因为我已经低于最小值，那么对于这种情况，我将缩小其他内容，如图形。

- Robert Bruce

---

最小字体大小并不能告诉您关于比例的任何信息。如果您需要将所有内容保持在视口内，请使用流式CSS网格或类似的东西。 - Bart

我赞同@Bart的观察，但从学术角度来看：如果我真的想要这些信息，这就非常接近我会做的事情了。 - Jordan Gray

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

编辑：这在火狐浏览器上不起作用，因此我创建了一种新的、稍微不同的方法：

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

- Frane Poljak

Answer 2

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

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

你必须从计算出的结果中去掉“px”以获得一个数字，元素必须被显示出来，但可以通过 position:absolute; 在屏幕外。这似乎现在在Chrome和Firefox中都可以工作，因此我认为没有必要使用clientHeight解决方法。

今年早些时候，在Chrome 73中，根em空间大小和Chrome中的最小字体大小设置存在问题。自那以后，Chrome改变了他们的最小字体大小策略和用户界面。他们现在支持零最小值，Firefox也是如此。

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

虽然我可以将元素的字体大小设置为零，但是字体大小低于3px会存在问题，因为字体大小越小，与文本宽度的比例就越小，还有其他我还没有完全调试的原因。在某个点上，请求减少1px的宽度允许我更改字体大小，但是<div>的clientWidth会冻结：改变字体大小对宽度没有影响。减少2px是可以的，因为更改更大，或者看起来是这样。我可以在调试器中的Watch窗格中将style.width设置为所需值，这让我摆脱了无限循环。

最奇怪的部分是，我可以在不同的字体大小/宽度下引起此问题，没有精确的临界点。这更多是一个小变化有问题的范围。可能是Chrome的一个bug，但是在3px以下的尺寸似乎不太可能。我可能会在此元素中强制执行自己的最小值3px，以简单地避开这些问题。

- Sideways S

Answer 3

我的问题出现在以下浏览器中：QQ浏览器 *¹ 和搜狗浏览器 *²。

如果您将任何元素插入或更改为小于9px的字体，则会被忽略并保持为9px。

也许我的问题与提到的问题略有不同，但我用这个polyfill解决了它：

// get-min-visible-font-size.js v1
function getMinVisibleFontSize() {
    var spanFS = document.createElement('span');
    spanFS.setAttribute('style', 'font-size:1px!important;display:none!important;');
    document.body.appendChild(spanFS);
    var minFontSize = parseInt(getComputedStyle(spanFS).fontSize);
    document.body.removeChild(spanFS);
    return minFontSize;
};

我选择返回整数值，因为这样后面的测试会更容易：

if( getMinVisibleFontSize() > 6){
    [...]
};

但是所有返回的值实际上都是以像素为单位。

它是如何工作的：只需使用font-size = 1px进行垃圾邮件，将其添加到正文中并检查字体大小。如果大于1px，则您在限制最小字体大小（这些情况下为9px或12px）的浏览器中。 重要的是该值不为零，因为如果在所有情况下检查零，则文本会消失，并且即使在这些浏览器中也会得到零。

可能在未来会有一些CSS来定义min-font-size以及min-width，因此我将函数名称命名为minVisibleFontSize。

适用于IE-11，但我没有为旧浏览器做过...

¹ = QQBrowser v10.8.3，基于Chromium 70.0.3538.25。（9px） ² = Sogou Explorer v11.0.1.34700，基于Chromium 80.0.3987.87，我认为是因为它在userAgent中。（12px）

- Luis Lobo