資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 更改字型大小？
CSS，即層疊樣式表，是控制網頁視覺呈現的強大工具。其中一個方面是能夠調整頁面上文字元素的字型大小。這可以透過使用 font-size 屬性來實現。
要為特定元素設定特定的字型大小，我們使用類或 ID 選擇器與 font-size 屬性結合使用。
在這篇文章中，我們將看到多個使用 CSS 更改字型大小的示例 -
透過使用 font-size 屬性，我們可以為特定元素或類設定特定的字型大小。例如，要將 元素的字型大小設定為 18 畫素，我們將使用以下程式碼 -
P{
font-size:18px;
}
示例
<html>
<head>
<title>How to change the font size using CSS</title>
<style>
.p1{
font-size:20px;
}
</style>
</head>
<body>
<h1>Welcome to tutorialspoint</h1>
<p class="p1">Change the font size using CSS</p>
<p>This is normal paragraph</p>
</body>
</html>
我們還可以使用 font-size 屬性設定相對字型大小，例如 larger 或 smaller，這將相對於父元素的字型大小更改字型大小。為此，我們將使用以下程式碼 -
P{
font-size:larger;
}
示例
<html>
<head>
<title>How to change the font size using CSS</title>
<style>
.p1{
font-size:large;
}
.p2{
font-size:small;
}
</style>
</head>
<body>
<h1>Welcome to tutorialspoint</h1>
<p class="p1">Change the font size using CSS - Large font</p>
<p class="p2">Change the font size using CSS - Small font</p>
<p>This is normal paragraph</p>
</body>
</html>
另一種定位特定單詞的方法是使用 :not css 選擇器。這允許定位元素中的所有單詞，除了唯一單詞。例如 -
CSS
p span:not(.unique) {
font-size: 18px;
}
HTML
<p>This is a <span class="not-unique">not unique</span> word, but this <span class="not-unique">word</span> is <span class="unique">unique</span>.</p>
示例
<html>
<head>
<title>How to change the font size using CSS</title>
<style>
p span:not(.unique) {
font-size: 20px;
}
</style>
</head>
<body>
<p>Lorem Ipsum is simply dummy text of <span class="notunique">not unique</span> the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <span class="not-unique">not unique</span> when an unknown printer took a galley of type and scrambledg,</p>
</body>
</html>
CSS 中的 font-size 屬性允許精確控制網頁上文字元素的大小。無論我們是想為特定元素設定特定的字型大小，還是相對於父元素的字型大小調整字型大小，或者定位特定單詞，CSS 都提供了必要的工具來完成此操作。
更新於: 2023-03-09
1K+ 瀏覽量
廣告