在Javascript中测量字符串宽度

我试图精确地将一个字符串适合一定的宽度。这意味着字体大小根据字符串而改变。我现在用下面的函数，使用jQuery：在Javascript中测量字符串宽度

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设置字体大小，以可能的最低值。我用这个值初始化循环并用1递增字体大小，直到字符串比包含元素的宽度更宽。这种情况下的字符串是“date”，包含的元素是“clock”。

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

如果有人知道更好的方法来做到这一点，请让我知道！谢谢。

来源

2011-12-13 Daan

为了确保获得所有样式，并将其应用到页面完全呈现时将应用的样式中，是的，您确实希望将该元素放入DOM中（并且放在DOM中的正确位置DOM）之前，你做你的测量的东西。但是，您不必等到其他的（除非您认为它会影响您测量的字符串的样式）。你可以把你的代码放入script区块立即之后 — —之后不等ready。根据Google's Closure library engineers，date元素将在那里并可访问。例如，如果date是span：

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

这是不幸的，便能混合代码和标记一样，（特别是如果你有不同的团队做的标记和代码），但如果你的要求是尺寸文本绝对的尽快，那就是这样。

上面还假设您的fontResize函数已经加载（例如，在页面上方的script块中）。这是将这种标记和代码混合在一起的另一个原因，因为通常当然您希望在关闭body标记之前将您的脚本at the bottom。

但是：可能值得尝试一下，看看您是否可以在刚刚关闭body标记之前放置的脚本中调整大小。对于页面来说，看起来不太对，但是很小，当然，无论如何，页面看起来有点滑稽。那么你就不会有混合问题，并且不必提前加载脚本。你可能会发现刚刚结束之前的标签已经足够了。

来源

2011-12-13 13:47:55

感谢您的解释。由于我使用的是背景图片（需要花费相当多的时间来加载），因此我决定如果能够使用图片加载文本（感觉便宜），最好。在“onload”之后放置所有功能似乎已经成功了。如果我理解正确，那么“卸载”后的功能仅在加载整个页面时调用。所以这应该是有道理的。 – Daan

@ KeyMs92：是的，在加载所有资源的时候，load事件在页面加载循环中非常晚的时候被触发。如果这对你来说足够早，那么很好，但如果不是的话，你总是可以创建一个引用背景图像的img'元素（不添加到DOM）并观察它的'load'事件，这样你就可以尽早行事。 –

如何使用画布和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); 
    });

来源

2011-12-13 13:56:18

谢谢，你是否也知道一种方法来消除使用循环来获取字体大小？循环似乎需要相当长的时间，特别是当它以低值初始化时。 – Daan

在Javascript中测量字符串宽度

回答

相关问题