使用 jQuery 设置字体大小（fontSize）

在网页设计与开发中，灵活控制字体大小是提升用户体验的重要环节。jQuery 作为一款强大的 JavaScript 库，为我们提供了便捷的方法来设置字体大小。

确保在 HTML 文件中正确引入了 jQuery 库。可以通过本地文件引入，也可以使用 CDN 链接。例如，使用百度的 CDN 链接：<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>。

设置单个元素的字体大小相对简单。假设 HTML 中有一个 <p> 元素：<p id="myPara">这是一段示例文本</p>。要设置这个段落的字体大小，我们可以在 jQuery 代码中这样写：

$(document).ready(function() {
    $('#myPara').css('fontSize', '20px');
});

这里 $(document).ready() 函数确保在文档完全加载后才执行代码。$('#myPara') 选择了 id 为 myPara 的元素，然后使用 .css() 方法设置其 fontSize 为 20px。

如果要批量设置多个元素的字体大小，可以使用类选择器。比如，HTML 中有多个 <p> 元素都有一个共同的类名 example：

<p class="example">段落一</p>
<p class="example">段落二</p>
<p class="example">段落三</p>

在 jQuery 中，通过如下代码设置它们的字体大小：

$(document).ready(function() {
    $('.example').css('fontSize', '18px');
});

这样，所有带有 example 类的 <p> 元素字体大小都会变为 18px。

除了固定的像素值，还可以使用相对单位。例如，使用 em 单位可以根据父元素的字体大小来动态调整。若父元素字体大小为 16px，设置子元素字体大小为 1.5em，那么子元素字体大小将是 16 * 1.5 = 24px。代码示例如下：

$(document).ready(function() {
    $('.example').css('fontSize', '1.5em');
});

还能根据用户操作来动态改变字体大小。比如，为一个按钮添加点击事件，点击按钮时增大段落的字体大小：

<button id="increaseFont">增大字体</button>
<p id="text">示例文本</p>

$(document).ready(function() {
    $('#increaseFont').click(function() {
        $('#text').css('fontSize', function(index, currentSize) {
            return parseFloat(currentSize) + 2 + 'px';
        });
    });
});

通过上述方法，利用 jQuery 可以轻松实现各种场景下的字体大小设置，满足多样化的网页设计需求。