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

Posted 2023-03-06

【中文标题】Vanilla JavaScript：调整字体大小以适应容器

【英文标题】：Vanilla JavaScript: Resize font-awesome to fit container

【发布时间】：2018-04-21 05:56:20

【问题描述】：

我一直在创建一个音频播放器，使用原生 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 的默认 font-size: inherit 样式提供一些输入。

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

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

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

a：与div 相同的结果。

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

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

【问题讨论】：

如果有人希望调整字体缩放方法：我已将所有普通字体设置为在整个正文中显示时都大得不舒服，因此它们总是在页面加载时按比例缩小（部分是为了测试，部分是为了保证覆盖默认大小）。由于我的音频播放器中的元素是动态生成的，除非启用 javascript，否则不会生成 html，因此它们不会破坏页面的其余部分。

【参考方案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);