在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中測量字符串寬度

回答

相關問題