使用FitText.js时会出现奇怪的结果

Strange results when using FitText.js

本文关键字：结果 FitText js 使用      更新时间：2023-09-26

使用FitText.js遇到一些问题-我正在用以下代码触发我的<head>中的脚本(我已经包含了供参考的所有内容，计划是在我完成设计和代码布局时尽量减少这一点)

<script type="text/javascript">
            $(document).ready(function() {
            var $container = $('#thumbnail-array');
                $container.imagesLoaded(function() {
                    $container.masonry({
                        itemSelector: '.video-thumbnail',
                        columnWidth: '.grid-sizer',
                        gutter: '.gutter-sizer',
                        percentPosition: true
                    });
                });
            });
            jQuery(document).ready(function() {
                jQuery('.mobile-close').click(function(e) {
                    jQuery(this).toggleClass('active');
                    jQuery('.mobile-nav').toggleClass('active');
                    e.preventDefault();
                });
                jQuery('.dropdown').click(function(e) {
                    jQuery(this).toggleClass('active');
                    jQuery('.mobile-nav').toggleClass('active');
                    e.preventDefault();
                });
                $(".fittext1").fitText(1.1);
                $(".fittext2").fitText(0.75);
            });
            $(document).ready(function() {
                $('.overlay').hover(function(){
                    $(this).parent().find('video').get(0).play();
                }, function() {
                    var video = $(this).parent().find('video').get(0);
                    video.pause();
                    video.currentTime = 0;
                });
            });
        </script>

主要的兴趣点可能如下:

$(".fittext1").fitText(1.1);
$(".fittext2").fitText(0.75);

从这里我将它应用到两个元素，它们在我的CSS中定义如下:

h5 {
    display:inline;
    font-size: 2em;
    margin-bottom: 0px;
    padding-bottom: 0px;
}
h6 {
    display:inline;
    font-size: 0.75em;
    letter-spacing: 0.3em;
    padding-top: 0px;
    margin-top: 0px;
    font-weight: 100;
}

然后在我的HTML中引用，像这样:

<h5 class="fittext1">Title</h5>
<hr>
<h6 class="fittext2">Subtitle</h6>

现在，我的理解是，他们应该缩放与他们的父元素-然而，有些东西是起来了，我不能找出它是什么!你可以看看这里发生了什么(最明显的是调整大小)- http://jameshenry.info/test/test.php

我已经尝试了一些不同的东西，但似乎不能让所有的文本翻转是一致的，更不用说按比例放大或缩小!

我最初是针对.fittext1和.fittext2元素使用#ID，但切换到类由于多个实例，但两者之间切换并不能解决问题。

有人知道是什么导致了这种行为吗?

…原因是FtText.js(正如GitHub上指出的项目)不与内联或span元素一起工作- FitText.js应用于的元素(不是包装器或容器!)需要是absolute, block或inline-block

我通过改变我的<h5>和<h6>标签来解决这个问题:inline-block;

相关文章：