Question

monospace字体中字体大小和字符宽度之间有什么依赖关系？在我的网络应用程序中，我使用“courier new”字体。我想知道，字符串的长度是多少？如果我知道css font-size属性，它怎么能帮助我知道字符串的长度？感谢

Answer 1

每个等宽字体在像素长度和字体大小之间都有自己的比例。但是，由于我们理想地将字体系列表示为几种选项，以便为浏览器提供广泛的范围以满足样式（如果它没有所需的字体），即使您确实找到了这个比例，这种方法也可能存在缺陷。还有谁说“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);

Answer 2

字体设计器定义了等宽字体中字体大小和字符宽度（字形）之间的依赖关系。

例如，在Windows 7上，Courier New字体中字形的前进宽度为1229单位。由于字体的高度是2048个单位，因此提前宽度非常非常接近字体大小的60％，因此在CSS中，0.6em对于所有实际用途来说，对于字形宽度来说，{{1}}是足够的数量

在Lucida Console中，前进宽度几乎相同：1234个单位。但另一方面，在Consolas，它相当小，1126个单位。

因此，结论取决于上下文，尤其是关于您的应用程序是否仅在特定字体可用的情况下运行（并且您的设置不会被用户覆盖）的问题。

Answer 3

请原谅我，如果我做了一件完全错误的事，因为我已经在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类中的位置之外，我注释掉了所有内容，因为我发现它没必要。

这现在完美无缺

monospace字体中字体大小和字符宽度之间有什么依赖关系？

3 个答案: