Javascript 如何使用ems和字体大小百分比精确调整嵌套元素的大小？

我有一个旋转木马，每个图像都有文本框，我的客户（对HTML一无所知）使用所见即所得文本编辑器编辑文本框。结果的输出类似于你最糟糕的噩梦；比如：

<div class="carousel-text-container">
<span style="font-size:18pt;">
    <span style="font-weight:bold;">
         Lorem 
         <span style="font-size:15pt;">Dolor</span>
     </span>
    Ipsum
    <span style="font-size:19pt;">
         <span>&nbsp;</span>
         <span>Sit<span>Amet</span></span>
    </span>
</span>
</div>

如何可靠准确地调整所有内容的大小，使

.carousel text container

的所有子项都达到原始字体大小、边距、填充、行距等的真实百分比

现在，我正在设想某种递归JavaScript函数：

var carouselTextBoxEl;
function resizeCarouselTextBox () {
    // some example numbers thrown in
    var newWidthRatio = .8,
    function resizeCarouselTextBoxEl (el, nestedLevelNum) {
        nestedLevelNum = nestedLevelNum || 1;
            
        var childElFontSizePxStr = parseFloat(el.css('font-size')), // 16.2984392, for example
            // calculate new font size based on
            // width ratio of original size site to new size,
            // and do something with nestedLevelNum... what's the math with that?
            newChildElFontSizePxStr = childElFontSizePxStr * newWidthRatio,
            // get children of el, if any
            elChildrenEls = el.children(),
            i = elChildrenEls.length;
            
            el.css('font-size', newChildElFontSizePxStr + 'em');               
            while (--i >= 0) {
                resizeCarouselTextBoxEl(elChildrenEls[i], nestedLevelNum + 1);    
            }

    }
    
    carouselTextBoxEl.children().each(function () {
        resizeCarouselTextBoxEl($(this)
    });    
}
onSmallerScreen(resizeCarouselTextBox);

更新：我让客户端利用调整某些单词的大小来用作标题等，因此我不能简单地将所有内容设置为单个字体大小

只是想一想：是否有可能将其放置在HTML5画布中，并以这种方式拍摄快照和/或调整大小？

这是CSS（层叠样式表）的一种性质，所有子元素都继承其父元素的样式：）

我将使用jQuery动态选择给定容器的所有子元素并更改其字体大小：

$('.carousel-text-container').find('*').css('font-size', '14px');

或者，您可以删除字体大小，以便所有子元素将使用为

声明的字体大小。carousel text container

类：

$('.carousel-text-container').find('*').css('font-size', '');

$('.carousel-text-container').find('*').css('font-size', '');