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
本文结合自己对网易与淘宝移动端首页
html
元素
上的
font-size
这个属性的思考与学习，讨论
html
5设计稿尺寸以及
前端
与设计之间协作流程的问题，内容较多，但对你的技术和工作一定有价值，欢迎阅读和点评：）。
1. 问题的引出
最近阅读白树的博文《移动web资源整理》时，他在博文中有一段指出，如果
html
5要适应各种分辨率的移动设备，应该使用rem这样的尺寸单位，同时给出了一段针对各个分辨率范...
export const getTextWidth = (str,
fontS
ize
) => {
let result = 10;
let ele = document.createElement('span')
//字符串中带有换行符时，会被自动转换成<br/>标签，若需要考虑这种情况，可以替换成空格，以获取正确的
宽度
//str = str.replace(/\\n/g,' ').replace(/\\r/
canvas文字的绘制
我们在使用canvas画各种图的时候，大多时候会有文字的绘制，比如，各种图表，进度条，钟表等等，都需要绘制文字。所以绘制文字也是canvas入门必须的基础。
1.canvas绘制文字的API
绘制文字很简单就下面这个方法。
fillText(str, x, y, maxW)：str绘制的文字，(x, y)起始坐标，maxW是最大
宽度
，绘制文字超过该
宽度
则不显示。
stro...
var a = "abcDEfGgdefg32asdf38"; [removed]("原始:"+a+"
") [removed]("粗体:"+a.bold()+"
"); [removed]("大号:"+a.big()+"
");...[removed]("字体大小:"+a.
fonts
ize
(10)+"
"); [removed]("字
