等宽字符的像素宽度

我在想，是否可以计算等宽字体中字符的像素宽度？我使用等宽字体，因为我需要每个字符在我的DIV中占用相同的宽度，但我不确定如何可靠地获取它的实际像素宽度。我需要修改宽度才能在JavaScript中进行计算。这是我的css：等宽字符的像素宽度

font-family: monospace; 
font-size: 15px;

这可能吗？

2013-03-22 TGH

请记住，仅仅因为您指定了特定的字体和大小，并不意味着我的浏览器将会使用它。 – 2013-03-22 15:56:05

您是否尝试过使用Google的@include字体的等宽字体？我认为这会导致所有（支持）浏览器的字符大小相同。不过，你仍然必须自己测量一下。 – Leaf 2014-05-15 06:30:47

我能想到的最好办法就是创建一个带有单个字符的跨度屏幕（position: absolute; top: -100px;）。然后，您可以测量跨度的宽度以获得等宽字体中1个字符的宽度。确保跨度上的padding设置为0px，但是，因为它包含在宽度中。

编辑：如果你只需要一个近似，ex单位往往是有帮助的。 1ex是小写'x'的高度。这通常与宽度大致相同。但这不是确切的。

2013-03-22 15:53:45 jaypeagi

从技术上讲，'offsetWidth'属性可能是获取元素宽度的最佳选择。 '1ex'单位与字符的前进宽度没有定义关系;例如，对于16px大小的Courier New，字符的前进宽度是10px，但“1ex”是7px。 – 2013-03-22 18:14:22

我不确定是否可以绝对确定所有平台上的字母，等宽或其他宽度，甚至是高度。字体大小上的PX后缀甚至不代表屏幕上的实际像素（有关更多信息，请参见here）。

我怀疑唯一的办法是对每个字符使用固定的宽度跨度。

出于兴趣，我很想知道为什么你需要固定宽度的字母。你能分享一个JS小提琴吗？

2013-03-22 15:54:18 po228

我基本上工作靠近一个宽度，但想知道是否有一种方法可以完全做到这一点 – TGH 2013-03-22 16:13:14

回答