等宽字体中 char 的字体大小和宽度之间有什么依赖关系？在我的网络应用程序中，我使用“courier new”字体。我想知道，以像素为单位的字符串的实际长度是多少？如果我知道 css font-size 属性，它如何帮助我知道字符串的真正长度？谢谢
【问题讨论】：
div 中，然后查询div 元素的大小以获取它的宽度。
每种等宽字体在像素长度和字体大小之间都有自己的比例。但是由于我们理想情况下会将字体系列表示为多个选项，以便为浏览器提供广泛的范围来满足样式（以防它没有所需的字体），即使您确实找到了比例，这种方法也可能存在缺陷。还有谁会说“Courier New”在一台设备上与另一台设备上具有相同的间距/尺寸/...？
一个确定的方法是使用 JavaScript，克隆元素并动态检查大小值。
看看这个小提琴的例子
http://jsfiddle.net/zUFwx/（代码参考jQuery）
function getSizeOfTextInElement(domElement) {
var $element = $(domElement),
$clone = $element.clone(),
size = {
width : 0,
height : 0
};
$clone.addClass("sizingClone");
$(document.documentElement).append($clone);
size.width = $clone.width();
size.height = $clone.height();
$clone.remove();
return size;
}
var elementToCheck = document.getElementById("checkSizeExample"),
sizeOfElement = getSizeOfTextInElement(elementToCheck),
message = "element has a width of " + sizeOfElement.width + "px";
$("#result").text(message);
【讨论】：
<div>元素的大小，而不是其中的文本。如果你修改文本，大小不会改变，但如果你改变它运行的框架的大小，它会。
如果我做的事情完全错误，请原谅我，因为我已经在 SO 上工作了一段时间，但这是我第一次做出贡献。
这是困扰我的事情，@Stephen James 确实为我想要实现的目标做好了准备。
我在让它工作时遇到了一些问题，发现你小提琴中的 CSS 不正确
CSS：
#checkSizeExample
{
font-family : Courier;
font-size : 8pt;
}
.sizingClone { // this was originally an id tag not a class tag
position : absolute !important;
/* top : 100% !important;
left : 100% !important; // not sure why but this line was causing the div to
// expand to 100%.
visibility: hidden !important;
width : auto;
height : auto; */
}
我发现除了 sizingClone 类中的位置之外的所有内容都注释掉了，因为我发现它没有必要。
现在完美运行
【讨论】：
字体大小和等宽字体中字符（字形）宽度之间的依赖关系由字体设计者定义。
例如，在 Windows 7 上，Courier New 字体中字形的前进宽度为 1229 个单位。由于字体的高度是 2048 个单位，因此提前宽度非常非常接近字体大小的 60%，因此在 CSS 中，0.6em 对于所有实际用途的字形宽度来说都是足够的。
在 Lucida Console 中，前进宽度几乎相同：1234 个单位。但另一方面，在 Consolas 中，它要小得多，只有 1126 个单位。
因此，结论取决于上下文，尤其是关于您的应用程序是否仅在特定字体可用的情况下运行（并且您的设置不会被用户覆盖）的问题。
【讨论】：