字体大小和字符宽度之间的依赖关系在等宽字体？ [英] What dependency between font-size and width of char in monospace font?

问题描述

字体大小和字符宽度在等宽字体之间有什么依赖关系？在我的网络应用程序中，我使用快递新字体。我想知道，什么realy长度的像素的字符串？如果我知道css font-size属性，它如何可以帮助我知道真正的字符串长度？感谢

What dependency between font-size and width of char in monospace font? In my web-application I use "courier new" font. I want to know, what realy length in pixels of string? If I know css font-size property, how can it help me to know really length of string? Thanks

推荐答案

每个等宽字体在像素长度和字体大小之间都有自己的比例。但是，因为我们理想地表达字体系列作为几个选项给浏览器一个宽范围来实现风格（如果没有所需的字体），这种方法可能有缺陷，即使你找到比率。还有谁是说Courier New在一个设备上与另一个设备上的间距/大小相同？

Each monospace font would have its own ratio between pixel length and font-size. But since we would ideally express font family's as several options to give the browser a wide range to fulfill the style (in case it doesn't have the font required), this method may be flawed even if you do find the ratio. Also who is to say that "Courier New" has the same spacing/sizing/... on one device as on another?

一个确定的方法是使用JavaScript，克隆元素并即时检查大小值。

One sure way to tell this is to use JavaScript, clone the element and check the size values on the fly.

查看此示例

http://jsfiddle.net/zUFwx/ （代码引用jQuery）

http://jsfiddle.net/zUFwx/ (code references 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);

这篇关于字体大小和字符宽度之间的依赖关系在等宽字体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！