Vanilla JavaScript：调整 font-awesome 以适应容器

Question

我一直在使用香草 JavaScript 创建一个音频播放器来操纵 HTML <audio> 元素。

播放器是动态大小的，所有元素都缩放以适合父级 DIV。

我已经应用了我能找到的所有方法来缩放字体以适应父容器，并以一种看起来有效的方式组合了解决方案，但是我无法以相同的方式缩放超棒的字体图标。

图标的包含方式如下：

HTML:

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

我的解决方案通过实现 window.addEventListener('resize', resizeFont); 来实现，resizeFont 函数定义如下：

JavaScript:

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-awesome 的默认 [=19] 提供一些输入=]风格。

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

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

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

a：与div.

相同的结果

i: resizeFont() on window load does 将图标缩放到正确的大小以适合容器，但字体仍然当触发 window 调整大小事件时消失。

所以，我想 .resize class 应该应用于 i 元素，但是我不知何故需要定义它的大小，或者它的容器的大小，不同。

Answer 1

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

将以下 javascript 代码添加到 page/site:

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);

Vanilla JavaScript：调整 font-awesome 以适应容器

Vanilla JavaScript: Resize font-awesome to fit container

javascript

css

fonts

font-size

font-awesome

HTML:

JavaScript: