TA貢獻(xiàn)1830條經(jīng)驗(yàn) 獲得超9個贊
用于HTML Canvases的上下文具有用于檢查字體大小的內(nèi)置方法。此方法返回一個TextMetrics對象，該對象具有包含文本寬度的width屬性。
function getWidthOfText(txt, fontname, fontsize){
if(getWidthOfText.c === undefined){
getWidthOfText.c=document.createElement('canvas');
getWidthOfText.ctx=getWidthOfText.c.getContext('2d');
}
getWidthOfText.ctx.font = fontsize + ' ' + fontname;
return getWidthOfText.ctx.measureText(txt).width;}或者，正如其他一些用戶所建議的那樣，您可以將其包裝在一個span元素中：
function getWidthOfText(txt, fontname, fontsize){
if(getWidthOfText.e === undefined){
getWidthOfText.e = document.createElement('span');
getWidthOfText.e.style.display = "none";
document.body.appendChild(getWidthOfText.e);
}
getWidthOfText.e.style.fontSize = fontsize;
getWidthOfText.e.style.fontFamily = fontname;
getWidthOfText.e.innerText = txt;
return getWidthOfText.e.offsetWidth;}測試：
第一個解決方案（畫布） - 測試，工作（以像素為單位返回）
第二個解決方案（DOM） - 測試，工作（以像素為單位返回）
請注意，由于實(shí)現(xiàn)差異，兩者可能會返回略有不同的值。
性能測試：平均超過100次迭代的26788次調(diào)用。測試于2014年末mac mini，1.4 GHz i5
Safari，版本10.1.1（12603.2.4）：
第一種解決方案：26788次調(diào)用為33.92毫秒
第二種解決方案：26788次調(diào)用為67.94毫秒
谷歌瀏覽器，版本60.0.3112.90：
第一種解決方案：26788次調(diào)用為99.1963毫秒
第二種解決方案：26788次調(diào)用307.4605毫秒
舉報