浏览器最小字体检测

问题

如何检测浏览器所支持的最小字体大小？

解答

通过 JavaScript 动态设置 DOM 元素的字体大小，然后读取实际生效的值来判断浏览器是否支持该字体大小。

function getMinFontSize() {
  const testElement = document.createElement('div');
  testElement.style.fontSize = '1px';
  document.body.appendChild(testElement);
  
  const computedSize = window.getComputedStyle(testElement).fontSize;
  const minSize = parseInt(computedSize);
  
  document.body.removeChild(testElement);
  return minSize;
}

// 使用示例
const minFontSize = getMinFontSize();
console.log(`浏览器最小字体大小: ${minFontSize}px`);

检测原理：如果设置的字体大小小于浏览器最小限制，getComputedStyle 返回的值会是浏览器实际渲染的最小值，而不是设置的值。

关键点

• 创建临时 DOM 元素并设置极小的字体大小（如 1px）
• 使用 getComputedStyle 获取浏览器实际渲染的字体大小
• 浏览器会自动将小于最小限制的字体调整为最小支持值
• 测试完成后记得移除临时元素