在等宽字体中，字体大小和字符宽度之间的依赖关系是什么？

Question

在等宽字体中，字体大小和字符宽度之间的依赖关系是什么？在我的web应用程序中，我使用了"courier new“字体。我想知道，字符串的实际长度是多少？如果我知道css的字体大小属性，它如何帮助我知道字符串的真正长度？谢谢

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对于所有实际用途的字形宽度来说都是足够的。

在Lucida控制台中，前进的宽度几乎相同: 1234个单位。但在Consolas，另一方面，它是相当小的，1126个单位。

因此，结论取决于上下文，特别是您的应用程序是否意味着只能在特定字体可用的情况下运行的问题(并且您的设置不会被用户覆盖)。

Answer 3

如果我做的事情完全错了，请原谅，因为我已经做了一段时间了，但这是我第一次做出贡献。

这是困扰我的事情，@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类中除了位置之外的所有内容，因为我发现它是不必要的。

这现在可以完美地工作了