資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究如何使用CSS自動調整字型大小？
我們可以使用CSS提供的“font-size-adjust”屬性來調整文字的字型大小。“font-size-adjust”屬性允許我們調整到一個通用的字型大小，而不管文件中使用的不同字體系列（如果有）。透過這個屬性，我們可以根據文件中大寫字母的字型大小來調整文件中使用的所有小寫字母的字型大小。
語法
font-size-adjust: number | initial | none | inherit | revert | revert-layer | unset
“font-size-adjust”可以取許多上面列出的值。這些值幫助我們調整到一個通用的字型大小，而不管使用的字體系列。
注意 − 在繼續學習示例之前，請確保使用Firefox瀏覽器，因為“font-size-adjust”屬性目前主要只在Firefox瀏覽器中可用。
示例1
在這個例子中，我們將小寫字母的字型大小調整為不同字體系列預設字型大小的一半。
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to auto adjust font size using CSS?</title>
<style>
p {
font-size-adjust: 0.5;
}
.a {
font-family: 'Times New Roman', Times, serif;
}
.b {
font-family: Helvetica;
}
</style>
</head>
<body>
<h3>How to auto adjust font size using CSS?</h3>
<p class="a">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus ipsa maiores ratione dolores consectetur soluta a hic recusandae fugiat quibusdam beatae voluptatum, repudiandae ipsam ex fuga nobis numquam corporis magnam?
</p>
<p class="b">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus ipsa maiores ratione dolores consectetur soluta a hic recusandae fugiat quibusdam beatae voluptatum, repudiandae ipsam ex fuga nobis numquam corporis magnam?
</p>
</body>
</html>
示例2
在這個例子中，我們將小寫字母的字型大小調整為預設字體系列預設字型大小的一半。
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to auto adjust font size using CSS?</title>
<style>
p {
font-size-adjust: 0.5;
}
</style>
</head>
<body>
<h3>How to auto adjust font size using CSS?</h3>
<p class="a">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus ipsa maiores ratione dolores consectetur soluta a hic recusandae fugiat quibusdam beatae voluptatum, repudiandae ipsam ex fuga nobis numquam corporis magnam?
</p>
<p class="b">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus ipsa maiores ratione dolores consectetur soluta a hic recusandae fugiat quibusdam beatae voluptatum, repudiandae ipsam ex fuga nobis numquam corporis magnam?
</p>
</body>
</html>
結論
在本文中，我們學習了“font-size-adjust”屬性是什麼，並使用它透過兩個不同的例子，利用CSS自動調整文件中文字的字型大小。在第一個例子中，我們將小寫字母的字型大小調整為自定義字型的預設字型大小的一半；在第二個例子中，我們將小寫字母的字型大小調整為預設字型的預設字型大小的一半。
更新於：2023年2月22日
750 次瀏覽
廣告