14

等宽字体中字符的字体大小和宽度之间有什么依赖关系？在我的网络应用程序中，我使用“courier new”字体。我想知道，以像素为单位的字符串的实际长度是多少？如果我知道 css font-size 属性，它如何帮助我知道字符串的真正长度？谢谢

4

3 回答 3

7

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

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

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

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

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

于 2013-10-01T11:26:55.670 回答
1

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

这现在完美无缺

于 2014-03-26T04:35:30.653 回答