CSS 如何自動(dòng)調(diào)整字體大小

我們可以使用CSS給我們的 “font-size-adjust “屬性來調(diào)整文本的字體大小。font-size-adjust “屬性允許我們調(diào)整到一個(gè)共同的字體大小，而不考慮文檔中使用的不同字體家族（如果有的話）。有了這個(gè)屬性，我們就可以根據(jù)文檔中大寫字母的字體大小來調(diào)整文檔中使用的小寫字母的字體大小。

語法

font-size-adjust: number | initial | none | inherit | revert | revert-layer | unset

HTML

“font-size-adjust “可以采用上面列出的許多值。這些值可以幫助我們調(diào)整到一個(gè)共同的字體大小，而不管使用的是哪種字體家族。

注意 --在進(jìn)行示例之前，請(qǐng)確保使用Firefox，因?yàn)?“font-size-adjust “屬性目前只適用于Firefox這個(gè)主要瀏覽器。

例子1

在這個(gè)例子中，我們將把小寫字母的字體大小調(diào)整為所使用的不同字體家族的默認(rèn)字體大小的一半。

<!DOCTYPE html>
<html>
<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>
      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>
      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>

HTML

例2

在這個(gè)例子中，我們將把小寫字母的字體大小調(diào)整為所使用的默認(rèn)字體家族默認(rèn)字體大小的一半。

<!DOCTYPE html>
<html>
<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>
      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>
      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>

HTML

總結(jié)

在這篇文章中，我們學(xué)習(xí)了什么是 “font-size-adjust “屬性，并在兩個(gè)不同例子的幫助下，用它來自動(dòng)調(diào)整文檔中的文字字體大小。在第一個(gè)例子中，我們將小寫字母的字體大小調(diào)整為自定義字體默認(rèn)字體大小的一半；在第二個(gè)例子中，我們將小寫字母的字體大小調(diào)整為默認(rèn)字體的一半。

該文章在 2023/8/24 22:37:53 編輯過

關(guān)鍵字查詢

相關(guān)文章

正在查詢...

點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。

點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。

點(diǎn)晴WMS倉儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲(chǔ)管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。

點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi)，不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。