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

Posted 2023-03-16

【中文标题】Javascript：如何获得浏览器的最小字体大小？

【英文标题】：Javascript: How can I get a browser's minimum font size?

【发布时间】：2013-04-23 13:38:13

【问题描述】：

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

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;

仅仅设置样式并读回是行不通的，因为它会返回设置而不是浏览器实际使用的内容。

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

【问题讨论】：

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

我支持@Bart 的观察，但在学术上：如果我真的想要这些信息，这与我会做的非常接近。

【参考方案1】：

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

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

你必须从计算结果中去掉“px”才能得到一个数字，并且元素必须显示，但它可以通过position:absolute;在屏幕外显示这似乎现在在 Chrome 和 Firefox 中都可以使用，所以有不需要 clientHeight 解决方法 AFAICT。

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

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

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

最奇怪的部分是我可以在不同的字体大小/宽度下导致这个问题，没有精确的临界点。它更多的是一个小的变化是有问题的范围。这可能是一个 Chrome 错误，但对我来说，低于 3px 的尺寸似乎不太可能。我可能会在这个元素中强制设置我自己的最小 3px，以简单地回避这些问题。

【参考方案2】：

我是这样做的：

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;

【参考方案3】：

我的问题出现在以下浏览器中：QQBrowser *¹ 和 Sogou Explorer *²。

如果您将任何元素插入或更改为低于 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 发送垃圾邮件，将其添加到正文并检查 font-size 大小。如果它大于 1px，那么您使用的浏览器限制了最小字体大小（在这些情况下为 9px 或 12px）。 重要的是该值不为零，因为如果您在所有情况下都检查为零，则文本会消失，即使在这些浏览器中您也会得到零。

可能以后会有一些 CSS 来定义 min-font-size 和 min-width，所以我把函数名命名为 minVisibleFontSize。

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

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