在Javascript中测量字符串宽度

Measuring the string width in Javascript

本文关键字：字符串 测量 Javascript      更新时间：2023-09-26

我正试图精确地将字符串放入一定的宽度。这意味着字体大小会根据字符串而变化。我现在使用jQuery使用以下函数:

function fontResize ( )
{
    for (var i = $("#date").css("font-size").slice(0, -2); $("#date").width() < $("#clock").width(); i++)
        $("#date").css("font-size", i.toString() + "px");   
}
我的想法是将CSS中的font-size设置为尽可能小的值。我用这个值初始化循环，并将font-size增加1，直到字符串比包含元素的宽度更宽。在本例中，字符串为"date"，包含元素为"clock"。

虽然这工作，我认为主要的缺点是字符串必须首先绘制之前的宽度可以确定。这意味着我不能在加载函数体之前调用这个函数。

如果有人知道更好的方法，请告诉我!谢谢。

为了确保在页面完全呈现时应用到它的所有样式，是的，您确实希望在进行测量之前将元素放入DOM(并在DOM的正确位置)。但是，您不必等到else的所有内容都存在(除非您认为它会影响您正在测量的字符串的样式)。你可以把你的代码放在script块立即在question —不等待ready。根据Google的Closure库工程师的说法，date元素将在那里并且可以访问。例如，如果date是span:

<body>
...
<span id="date">December 13th</span>
<script>fontResize();</script>
...
...
</body>

像这样把代码和标记混在一起是很不幸的(特别是如果你有单独的团队来做标记和代码)，但是如果你的要求是尽可能快地调整文本的大小，那就应该这样做。

上面还假设您的fontResize函数已经加载(例如，在页面上更高的script块中)。这是像这样混合标记和代码是不幸的另一个原因，因为通常您当然希望将脚本放在底部，就在关闭body标记之前。

然而:也许值得尝试一下，看看您是否可以在关闭body标记之前的脚本中进行大小调整。页面可能会有一个小窗口看起来不正确，但是非常小，当然页面在加载时看起来有点滑稽。这样就不会有混合问题，也不必提前加载脚本。您可能会发现，刚刚结束前的- body -标签已经足够快了。

如何使用画布和measureText方法?

    $(function () {
        var canvas = $("canvas")[0];
        var context = canvas.getContext("2d");
        var text = "hello world";
        context.font = "40pt Calibri";
        var metrics = context.measureText(text);
        alert(metrics.width);
    });
相关文章：