Question

我希望我的所有文字都在我的文档中。<p>标记，没有<p>标记，<span>，所有h {'1}}等在h1,h2,h3,h4 中增加1个额外像素（来自样式表中的样式）仅font-size:秒或.5秒。 1然后恢复原始布局样式大小。

注意：此外，必须有平滑过渡选项。

Answer 1

你必须在元素周围循环才能完成一个像素：

$('h1, h2, h3, h4, h5, h6, p').each( function () {
   var $e = $(this);

    var size = parseInt($e.css('font-size'), 10);

    $e.css('font-size', (size + 1) + 'px');

    window.setTimeout(function () {
        $e.css('font-size', size + 'px');
    }, 1000);

    $e.html(size);
});

See this running

使用相对字体大小设计页面效率会更高一些，然后将body字体调整为1px。

您可以使用以下方式平滑过渡：

h1, h2, h3, h4, h5, h6, p  {
    transition: all 0.5s ease;
}

警告 - 如果您在大量文本中使用此功能，浏览器可能难以顺利回流页面（即，它看起来比仅仅1px移位更加锯齿状）。

Answer 2

我建议使用rem或em等相对单位，以便获得更多控制权。

在下面的示例中，所有字体大小都与根元素相关（在本例中为html）。

当页面最初加载时，字体较大，然后切换一个类，字体大小会过渡减少。

＆＃13;

setTimeout(function() {
  $('html').addClass('smaller-font');
}, 1000);

＆＃13;

html { font-size: 17px; }
html.smaller-font { font-size: 16px; transition: 2s font-size; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.2rem; }
p { font-size: 1rem; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>H1 element</h1>
<h2>H2 element</h2>
<h3>H3 element</h3>
<p>Paragraph</p>

＆＃13;

在加载时，所有文本的字体大小都大1px：然后返回

2 个答案: