window.onload = function() {

let box = document.getElementById('box')

function getFontSize(str = '666,666.66', targetSize = 20) {

let boxWith = box.offsetWidth;

let fontSize = targetSize;

let theCanvas = null;

let practicalWidth = getWidth(str, fontSize)

function getWidth(text, size) { // 使用canvas计算字符串展示所需宽度

let font = `normal ${size}px Microsoft YaHei`

const canvas = theCanvas || (theCanvas = document.createElement('canvas'));

const context = canvas.getContext('2d');

context.font = font;

return Math.floor(context.measureText(text).width)

while ((10 <= fontSize) && (practicalWidth > boxWith)) { // 所需宽度小于实际宽度，或者计算字体大于最小字体10

fontSize -= 2

practicalWidth = getWidth(str, fontSize); // 重新计算目标字符串所需宽度

boxWith = box.offsetWidth - getWidth('...', fontSize); // 文本溢出剔除...所占距离

if (practicalWidth< boxWith) {

break

return fontSize; // 输出fontSize

box.style.fontSize = `${getFontSize()}px`

</script>

<div id="box" class="box">666,666.66</div>

</body>

</html>

fonts ize 方法返回使用 HTML font 标签中 s ize 属性定义字体大小的字符串。其语法如下： 代码如下: str_object. fonts ize ( s ize ) 参数说明: str_object 要操作的字符串（对象） s ize 必需。1 到 7 的数字，数字越大字体越大，字体大小对比如下： 1：10px 2：14px 3：16px 4：18px 5：24px 6：32px 7：48px 提示：该方法不符合 ECM export const getTextWidth = (str, fontS ize ) => { let result = 10; let ele = document.createElement('span') //字符串中带有换行符时，会被自动转换成<br/>标签，若需要考虑这种情况，可以替换成空格，以获取正确的 宽度 //str = str.replace(/\\n/g,' ').replace(/\\r/