Vanilla JavaScript:调整字体大小以适应容器 [英] Vanilla JavaScript: Resize font-awesome to fit container

问题描述

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

播放器具有动态大小，所有元素都缩放以适合父 DIV.

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

图标的包含方式如下:

HTML:

<按钮><a><i class="fa fa-play"></i></a>

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

JavaScript:

function resizeFont() {var elements = document.getElementsByClassName('resize');控制台日志(元素)；if (elements.length <0) {返回;}_len = 元素长度；对于 (_i = 0; _i <_len; _i++) {var el = 元素[_i];el.style.fontSize = "100%";for (var size = 100; el.scrollHeight > el.clientHeight; size -= 10) {el.style.fontSize = 大小 + '%';}}}

我在 CSS 中设置了 div、button 或 a 元素的字体大小，以便为 font-awesome 的默认设置提供一些输入font-size:继承样式.

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

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

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

a:与 div 相同的结果.

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

所以，我猜 .resize 类应该应用于 i 元素，但我需要以某种方式定义它的大小，或者它的容器的大小，不同.

解决方案

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

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

function jcfResizeText() {var elements = document.getElementsByClassName('jcfResize');if (elements.length <0) {返回;}_len = 元素长度；对于 (_i = 0; _i <_len; _i++) {var el = 元素[_i];el.style.fontSize = "100%";for (var size = 100; el.scrollHeight > el.clientHeight; size -= 10) {el.style.fontSize = 大小 + '%';}}}jcfResizeText();window.addEventListener('resize', jcfResizeText);

I have been creating an audio player using vanilla JavaScript to manipulate the HTML <audio> element.

The player is of dynamic size, with all elements scaled to fit the parent DIV.

I have applied all methods I can find for scaling font to fit the parent container and combined solutions in a way that seems functional, however I cannot make font-awesome icons scale in the same way.

The icons are contained in the following way:

HTML:

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

My solution works by implementing window.addEventListener('resize', resizeFont);, with the resizeFont function defined as follows:

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 + '%';
    }
  }
}

I set font-size of the div,button or a element in CSS in order to provide some input for font-awesome's default font-size: inherit style.

The resizeFont(); function is called once on page load, ensuring that the fonts displayed are scaled to fit the audio player's initial size.

I have attempted to apply the .resize class to various elements with the following results:

div: font won't display, or font displays at default size and then disappears on window resize.

a: same result as div.

i: resizeFont() on window load does scale the icon to the correct size to fit the container, but the font still disappears when the window resize event is fired.

So, I guess that the .resize class is supposed to be applied to the i element, but that I somehow need to define its size, or its container's size, differently.

解决方案

Add the class .jcfResize to any elements containing font which should be resized.

Add the following javascript code to the 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:调整字体大小以适应容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！