HTML中的<style>标签用于定义文档的样式信息，包括字体、颜色、布局等，要设置字体大小，可以使用CSS的font-size属性，下面详细介绍如何使用<style>标签设置字体大小。
内联样式
1、在HTML元素的style属性中直接设置字体大小：
<p style="font-size: 16px;">这是一个段落，字体大小为16像素。</p>
2、使用CSS选择器设置字体大小：
<p style="font-size: 16px;">这是一个段落，字体大小为16像素。</p> <p class="custom-font">这是一个带有自定义字体大小的段落，字体大小为20像素。</p>
外部样式表(CSS文件)
1、在HTML文件的<head>标签内引用外部CSS文件：
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <p>这是一个段落，字体大小为16像素。</p> </body> </html>
在styles.css文件中设置字体大小：
p {
font-size: 16px;
}
2、使用内部样式表(在HTML标签内编写CSS代码):
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 16px;
}
.custom-font {
font-size: 20px;
}
</style>
</head>
<body>
<p>这是一个段落，字体大小为16像素。</p>
<p class="custom-font">这是一个带有自定义字体大小的段落，字体大小为20像素。</p>
</body>
</html>
使用JavaScript动态修改字体大小
可以使用JavaScript来动态修改HTML元素的字体大小，以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 16px;
}
</style>
</head>
<body>
<p id="demo">这是一个段落，字体大小为16像素。</p>
<button onclick="changeFontSize()">改变字体大小</button>
<script>
function changeFontSize() {
var p = document.getElementById("demo");
var newSize = parseInt(prompt("请输入新的字体大小(像素):"));
p.style.fontSize = newSize + "px";
}
</script>
</body>
</html>
在这个示例中，当用户点击“改变字体大小”按钮时，会弹出一个提示框让用户输入新的字体大小(像素),然后将该值应用到段落元素上。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/218941.html
微信扫一扫 