html自适应字号大小插件

背景

项目中有遇到在显示数据时需要根据显示区域的大小来自适应能够显示的最大的字号大小，以便字号大小可以与区域大小相适应，调查了只使用css很难做到这一点，而如果只设置一个固定的字号的话，也可能出现文字溢出的情况。

思路

考虑使用JS来控制区域内的字号大小，从最小的字号开始，计算可以容纳得下的最大的字号，再使用这个字号作为这个区域的字号。

插件

前面废话了那么多，主要是分享一下完成这个需求的思路，现在我已将代码打包成一个插件，可以直接使用。

self-adapt-fontsize

使用

安装

可以通过npm来安装，也可以在页面中通过script标签直接引用，打包后的JS文件可以在上述项目的github地址找到

npm install self-adapt-fontsize --save

使用

<script src="./dist/index.js" type="text/javascript"></script>

...

var safs = SelfAdaptFontSize.getInstance();
safs.fontSize(document.getElementById("test1"),600,60);
safs.fontSize(document.getElementById("test2"),400,40);
safs.fontSize(document.getElementById("test3"),300,30);

...
<div id="test1" style="width:600px; height:60px;">this is a test.</div>
<div id="test2" style="width:400px; height:40px;">this is a test. this is a test.</div>
<div id="test3" style="width:300px; height:30px;">this is a test. this is a test. this is a test. this is a test.</div>

或者

import SelfAdaptFontSize from 'self-adapt-fontsize';
 
...
 
const safs = SelfAdaptFontSize.getInstance();
safs.fontSize(document.getElementById('test1'), 600, 60);
safs.fontSize(document.getElementById('test2'), 400, 40);
safs.fontSize(document.getElementById('test3'), 300, 30);
 
...
 
<div id="test1" style="width:600px; height:60px;">this is a test.</div>
<div id="test2" style="width:400px; height:40px;">this is a test. this is a test.</div>
<div id="test3" style="width:300px; height:30px;">this is a test. this is a test. this is a test. this is a test.</div>

目前这两种写法都支持

效果

目前可以实现如下的效果，插件根据不同的宽度和高度计算出最大可以适应此宽高的字号大小

---

---

后续开发计划

目前只完成了插件初始开发，后续考虑增加针对不同前端框架的支持优化，如react, angularjs等。

如果使用时有任务问题，可以提出issue，或直接联系我：

email: [email protected]

qq: 991637393

---

项目地址

如果觉着不错，还希望可以点个赞 =。=