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

Question

等宽字体的字号和字符宽度之间有什么依赖关系？ 我在我的 Web 应用程序中使用“courier new” 字体。我想知道字符串的实际像素长度是多少？ 如果我知道 CSS 中的 font-size 属性，如何帮助我了解字符串的实际长度？谢谢

- vicpro

---

这是JavaScript可以确定的东西，如果您找不到其他解决方案。 基本上，您只需将字符串放置在空的未样式化的 div 中，然后查询 div 元素的大小以获取其宽度。 - jsea

是的，我考虑过这个问题……但是我正在尝试寻找更优雅的解决方案。 - vicpro

Answer 1

在等宽字体中，字号与字符（字形）宽度之间的依赖关系是由字体设计师定义的。例如，在Windows 7上，Courier New字体中字形的前进宽度为1229个单位。由于字体高度为2048个单位，因此前进宽度非常接近字体大小的60％，因此在CSS中，0.6em将是所有实际目的下字符宽度的充足数量。在Lucida Console中，前进宽度几乎相同：1234个单位。但在Consolas中则要小得多，只有1126个单位。因此结论取决于上下文，特别是取决于您的应用程序是否仅在特定字体可用的情况下运行（并且用户不会覆盖您的设置）。

- Jukka K. Korpela

---

根据这个网页的说法，“对于大多数应用程序，建议使用3:5（0.6）的宽高比。” 这将是60％。http://www.plainlanguagenetwork.org/type/utbo211.htm - Richard Chambers

OCR-A字体的宽度/高度似乎为715/1000。 - ManuelAtWork

我现在最常用的两种等宽字体是Noto Sans Mono和IBM Plex Mono，它们的宽高比均为3:5。 - Graham Hannington

Answer 2

每种等宽字体都有自己的像素长度和字体大小之间的比率。但是，由于我们理想情况下应该将字体族列为几个选项，以便给浏览器提供广泛的范围以满足样式（如果它没有所需的字体），所以即使找到比率，这种方法也可能存在缺陷。还有谁能说“Courier New”在一个设备上与另一个设备上具有相同的间距/大小/...？

确定这一点的一种可靠方法是使用JavaScript，克隆元素并实时检查大小值。

请查看此jsfiddle示例

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);

- Stephen James

---

代码告诉我们整个<div>元素的大小，而不是其中的文本。如果你修改了文本，大小并不会改变，但如果你改变它运行的框架大小，它就会改变。 - Anatoliy Kmetyuk

Answer 3

如果我做错了什么，请原谅，因为我已经在SO上有一段时间了，但这是我第一次贡献。

这是一件困扰我的事情，@Stephen James真的很好地解决了我所要达到的目标。

我遇到了一些问题，发现你的fiddle中的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类中的位置之外的所有内容注释掉了，因为我认为这是不必要的。

现在它完美地工作了。

- doz87