Question

我对CSS单位感到非常困惑。我只想知道一件事：

如果我希望我的文本的字体大小在任何设备和任何情况下实际都是4mm。

我该怎么办？

Answer 1

尽管CSS中有mm unit，但当显示在屏幕上时，它并不一定反映实际的物理尺寸。无法确保所有设备和所有情况下的确切物理尺寸。屏幕媒体的CSS单位是anchored至px单位，它不是基于物理像素而是基于reference pixel。

参考像素是指设备上一个像素密度为96dpi且与阅读器之间的距离为一臂长的视角。因此，对于标称长度为28英寸的手臂，其可视角度约为0.0213度。对于臂长阅读，因此1px相当于大约0.26毫米（1/96英寸）。

参考像素因此高度取决于您使用的设备，并且可能会或可能不会导致正确的物理尺寸。

Answer 2

由于CSS支持mm作为一个单元，因此可以使用font-size: 4mm;。但是，此方法仅应用于打印样式表（参见https://www.w3.org/Style/Examples/007/units.en.html），因此您实际上要避免使用这些单位，而仅将px或em之类的单位用于其他目的。< / p>

但是，如果您真的（！）需要使用这些单位，则也可以使用这些单位（但我强烈建议您这样做）。

Answer 3

下面是示例代码：

<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
  var devicePixelRatio = window.devicePixelRatio || 1;
  dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
  dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;

  function setFontSizeForClass(className, fontSize) {
      var elms = document.getElementsByClassName(className);
      for(var i=0; i<elms.length; i++) {
          elms[i].style.fontSize = String(fontSize * dpi_y / 96) + "px";
      }
  }

  setFontSizeForClass('h1-font-size', 30);
  setFontSizeForClass('action-font-size', 20);
  setFontSizeForClass('guideline-font-size', 25);
</script>

有关其功能和使用方法的更多详细信息：https://stackoverflow.com/a/54190669/1915854

如何将字体大小设置为确切的物理大小？

3 个答案: