在HTML中可以设置字体大小。下面，我们来看看html如何设置字体大小吧。
01font
在HTML中，通常使用font标签来设置字体的样式，而用size属性来设置字体大小，如下图所示：
02size的值
随着size的值越大，那么显示的字体就会越大，如下图所示：
03h标签
使用h标签一般是用来设置标题字体大小的，如下图所示：
04预览效果
预览效果如下，随着h的值越大，那么字体就会越小。
难点在于点击前如何获取当前字体大小，这样才能在此基础上通过数学加法来放大，示例如下（按一次放大，字号 +4px）
<!DOCTYPE html><html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<title>获取文字大小</title>
<style>
body {font:normal 16px/1.8 tahoma}
#textWrap {width:600px margin:60px auto}
</style>
</head>
<body>
<input type="button" value="放大文字" onclick="zoomInFontSize()">
<div id="textWrap">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt error labore, dolorum voluptatum doloremque omnis dolorem nemo porro beatae, incidunt.
</div>
<script>
function zoomInFontSize() {
var obj = document.getElementById('textWrap'),
curSize = '' // 当前字体大小
// 创建一个容器，来测算当前字体大小
var getFontSize = function() {
var oDiv = document.createElement('div')
oDiv.innerHTML = 'ABC测试' // 写入任意字符
oDiv.style.lineHeight = 1
oDiv.style.position = 'absolute'
oDiv.style.top = '-9999em'
document.body.appendChild(oDiv)
return oDiv.offsetHeight
}
if (obj.style.fontSize == '') {
curSize = getFontSize()
} else {
curSize = parseInt(obj.style.fontSize, 10)
}
curSize += 4
if (curSize > 100) {
alert('不能再大了')
} else {
obj.style.fontSize = curSize + 'px'
}
}
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）