Vanilla JavaScript：调整字体大小-Awesome以适应容器

Question

我一直在使用vanilla JavaScript创建一个音频播放器来操作HTML 元素。

播放机的大小是动态的，所有元素都按比例调整以适应父div。

我已经应用了我能找到的所有方法来缩放字体，以适应父容器和组合解决方案，以一种看起来功能强大的方式，但我不能使字体强大的图标缩放以同样的方式。

图标的包含方式如下：

<div>
  <button>
    <a>
      <i class="fa fa-play">
      </i>
    </a>
  </button>
</div>

我的解决方案通过实现Window.AddEventListener('resize',resizeFont)；，其中resizeFont函数定义如下：

function resizeFont() {
  var elements  = document.getElementsByClassName('resize');
  console.log(elements);
  if (elements.length < 0) {
    return;
  }
  _len = elements.length;
  for (_i = 0; _i < _len; _i++) {
    var el = elements[_i];
    el.style.fontSize = "100%";
    for (var size = 100; el.scrollHeight > el.clientHeight; size -= 10) {
      el.style.fontSize = size + '%';
    }
  }
}

我在CSS中设置div、button或a元素的font-size，以便为font-awesome的默认font-size:inherit样式提供一些输入。

ResizeFont()；函数在页面加载时调用一次，以确保显示的字体缩放以适应音频播放机的初始大小。

我尝试将.resize类应用于各种元素，结果如下：

div:字体不会显示，或者字体以默认大小显示，然后在调整窗口大小时消失。

A:与div相同的结果。

i:ResizeFont()在窗口加载时会将图标缩放到适合容器的正确大小，但当触发窗口调整大小事件时，字体仍然会消失。

因此，我想.resize类应该应用于I元素，但我需要以不同的方式定义它的大小或容器的大小。

Answer 1

将类.jcfresize添加到任何包含应调整大小的字体的元素中。

将以下javascript代码添加到页面/站点：

function jcfResizeText() {
    var elements  = document.getElementsByClassName('jcfResize');
    if (elements.length < 0) {
        return;
    }
    _len = elements.length;
    for (_i = 0; _i < _len; _i++) {
        var el = elements[_i];
        el.style.fontSize = "100%";
        for (var size = 100; el.scrollHeight > el.clientHeight; size -= 10) {
            el.style.fontSize = size + '%';
        }
    }
}

jcfResizeText();
window.addEventListener('resize', jcfResizeText);