需求分析：
用于文字排版布局等相关的计算，可扩展添加设置文字加粗倾斜等属性。
(说明：验证此宽度可基于微软office2016的word，视图大小放大至400%，字体五号，设置为只用于西文，字符间距控制为不压缩....)
效果
image.png
代码
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id='labelText'
style='color:black;line-height:1.2;white-space:nowrap;top:300px;left:10px;position:fixed;display:block;visibility:visible;'>
</div>
<div id='labelText' style="margin-top: 30px;margin-left: 20px;">
<p style="color: red;">第一步：请先输入要测试的字体类型名称<span style="color: black;">(例如:微软雅黑、宋体、行楷、华文彩云等)</span>
<br />
<span style="color: green;">第二步：再点击运行(Run)</span>
<br />
<span style="color: blue;">第三步：在控制台查看输出的宽度值
</span>
</p>
<input id="font-type" type="text" value="" style="width: 30vw;height:5vh" placeholder="请输入要测试的字体类型名称" />
<button id="run">运行(Run)</button>
</div>
<div id="labelData" style="width:50%;height:auto ;margin-top: 50px;">
</div>
<script>
const fontArrData = [
'hellohellohellohellohe',
'你好呀你好呀你好呀你好呀',
'$$$$$$$$$$$$$$$$$$$$$$',
'FFFFFFFFFFFFFFFFFFFFFF',
'GGGGGGGGGGGGGGGGGGGGGG',
'HHHHHHHHHHHHHHHHHHHHHH']
// 获取输入的值
$(function () {
$("button").click(function () {
var value = $('input').val()
console.log("当前输入的字体类型是:" + `${value}`);
// 遍历数组
let arr = []
for (let i = 0; i < fontArrData.length; i++) {
var str = []
str = fontArrData[i]
str = str.substring(0, str.length - 2);//截取字符串
console.log(str.length, "length", str)
$("#labelText").css({
"font-size": "14px",
"font-family": `${value}`
}).html(str);
// 计算每一项的宽度
var width = $("#labelText").width() * 4;
// 将每一项宽度push到一个空数组并取用四舍五入取整值
arr.push(width.toFixed())
}
// 输出计算后的宽度的数组对象
$("#labelData").html("默认宽度=" + `[${arr},]`);
console.log("默认宽度=" + `[${arr},]`);
})
})
</script>
</body>
</html>
总结：
回顾jQuery的语法，简单实现，并整理为详细笔记说明。
网友评论