首页 > 编程知识 正文

动态字体怎么设置,css调整字体大小

时间:2023-05-04 13:35:26 阅读:162902 作者:314

思路是先把文字插入一个要素,取得文字所占的面积。

然后,通过比较其面积和希望加入元素的面积,可以求出一个定标。

根据比例生成dom,将其放入文本中,最后插入到所需元素中。

代码htmldivclass=' box '/div CSS.box { width :100 px; height:50px; } js /** str字符* w框宽* h框高* fontSize字体大小*根据字符大小等倍缩放生成的要素* */varcreatedomfromfont=function (str ) letDOM=$('#getboxsizefromfont ); letdomarea=DOM [0].offsetwidth * DOM [0].offsetheight; //获取字符所占的面积dom.remove (; let item style=` display : inline-block; word-break: break-all; font-size: ${fontSize}px `; if(Domareaarea ) ) varitemw=math.sqrt ) Domarea*w/h ); //缩放箱子宽度的var scale=w/itemW; //标尺item style=` width : $ { itemw } px; 传输方向:左中心; 传输: scale ($ { scale } ) `; } return ` div style=' $ { item style } ' $ { str }/div `; (; $('.box ' ).html(createdomfromfont ) )这是一个示例(,100,50,20 )

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。