Vanilla JavaScript: измените размер шрифта, чтобы вместить контейнер

Я создавал аудиоплеер, используя ванильный 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 + '%';
    }
  }
}

Я установил размер шрифта элемента div, button или a в CSS, чтобы обеспечить некоторый ввод для стиля шрифта по-умолчанию font-size: inherit.

Функция resizeFont(); вызывается один раз при загрузке страницы, гарантируя, что отображаемые шрифты масштабируются в соответствии с начальным размером аудиоплеера.

Я попытался применить класс .resize к различным элементам со следующими результатами:

div: шрифт не отображается или отображается с размером по умолчанию, а затем исчезает при изменении размера окна.

a: тот же результат, что и div.

i: resizeFont() при загрузке окна действительно масштабирует значок до правильного размера, чтобы соответствовать размеру контейнера, но шрифт по-прежнему исчезает при запуске события изменения размера окна.

Итак, я предполагаю, что класс .resize должен применяться к элементу i, но мне как-то нужно определить его размер или размер контейнера иначе.

Ответы

Ответ 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);