App下載

CSS怎么設(shè)置字間距？附示例源碼

猿友 2021-05-20 17:17:41 瀏覽數(shù) (4992)
反饋

在開發(fā)網(wǎng)頁時(shí)，如果網(wǎng)頁字體過于緊湊，用戶的體驗(yàn)感并不好。那么 CSS 怎么設(shè)置字間距呢？這篇文章告訴你。

letter-spacing 屬性

CSS 中的?letter-spacing?屬性常用來設(shè)置字間距。使用方式如下：

letter-spacing:距離數(shù)字+單位;

具體示例演示：

CSS設(shè)置字符間距

具體代碼：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS設(shè)置字符間距 - 編程獅(w3cschool.cn)</title>
	<style type="text/css">
		#two{
			letter-spacing: 2px;
		}
		#sex{
			letter-spacing: 6px;
		}
		#ten{
			letter-spacing: 10px;
		}
	</style>
</head>
<body>
	<p>這段文字沒有指定字符間距</p>
	<p id="two">這段文字字符間距為2px</p>
	<p id="sex">這段文字字符間距為6px</p>
	<p id="ten">這段文字字符間距為10px</p>
</body>
</html>

字符間距的設(shè)置不能過小也不能過大。過小的話頁面過于緊湊，文字顯得密密麻麻；過大的話又會(huì)顯得頁面空蕩蕩，內(nèi)容不充足。字符間距的設(shè)置需要根據(jù)情況而定。

以上就是文章“CSS 怎么設(shè)置字間距？附示例源碼”的全部內(nèi)容。想要了解更多 CSS 內(nèi)容請前往 w3cschool。

CSS

0 人點(diǎn)贊