当选取一段文字后，如果要实现对选取的文字设置大小，通常可以使用document.execCommand("fontSize",false, 5) 来实现，一般针对类似富文本场景，但是实际用这个方法操作后发布并不能实现某个像素的大小，比如24px,由于execCommand限制，第三个参数只能是1到7，如果要自定义大小，需要通过如下方式操作，以下是在vue中实现，其他方式类似。
\n\n\n\n<div>\n <button @click="command('12px')">font-size12</button></div>\n <div><button @click="bold">b</button></div>\n <div contenteditable="true" class="input-editor">通过filereader接口读取文件</div>\n</div>\n <script>\n command(value) {\n // 打开通过css设置样式开关\n document.execCommand( 'styleWithCSS', false, true);\n // 先将文字大小设置成1-7号中的任何一个大小\n document.execCommand( 'fontSize', false, 5);\n // 这时候浏览器会默认将文字包裹一层span，然后css设置在span上,然后我们再去寻找这个span，将其css修改成我们实际想要的字体大小\n let $parent = document.querySelector('.input-editor');\n let $spans = $parent.querySelectorAll( 'span');\n $spans.forEach( ($span) => {\n if ($span.innerHTML.indexOf(document.getSelection().toString()) !== -1) {\n $span.style.fontSize = value\n }\n });\n }\n </script>\n其中值得注意的是点击事件必须放在button标签上，如果是其他标签是无效的，foreach里面的代码的功能是只改选取文字的样式，未选取的文字不改样式，我看网上的方法并未实现该功能，网上的方法如果重复点击就会把所有的文字都改成一样的样式。
\n