Question

我试图将字符串精确地放入某个宽度。这意味着字体大小会根据字符串而改变。我现在使用以下函数，使用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，直到字符串宽于包含元素的宽度。在这种情况下，字符串是＆＃34; date＆＃34;并且包含的元素是＆＃34; clock＆＃34;。

虽然这有效，但我认为主要的缺点是必须首先绘制字符串才能确定宽度。这意味着我无法在加载正文之前调用此函数。

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

Answer 1

为了确保你获得了在页面完全呈现时应用的所有样式和类型，是的，你确实希望将元素放在DOM中（并且在DOM中的正确位置））在你做测量之前。但是你不必等到 else 的所有内容都存在（除非你认为它会影响你正在测量的字符串的样式）。您可以在相关元素之后立即将代码放在script块中 - 无需等待ready。根据{{3}}，date元素将在那里并可访问。例如，如果date是span：

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

混合代码和标记是很不幸的（特别是如果你有单独的团队做标记和代码），但如果你的要求是尽快确定文本的大小，那就是这样。

以上还假设您的fontResize功能已加载（例如，在页面上方的script块中）。这是混淆标记和这样的代码的另一个原因，因为通常你想要在关闭body标记之前放置你的脚本Google's Closure library engineers。

然而：可能值得尝试一下，看看您是否可以在结束body标记之前的脚本中进行调整大小。页面有一个很小的机会让页面看起来不对，但非常小，当然页面往往看起来有点搞笑，因为它们无论如何加载。那么你就不会有混插问题而且不必提前加载你的脚本。您可能很快就会发现即将结束的body - 标签。

Answer 2

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

在Javascript中测量字符串宽度

2 个答案: