我們可以使用 CSS 提供的“font-size-adjust”屬性來調整文本的字體大小。 “font-size-adjust”屬性允許我們調整到通用字體大小,無論文檔中使用不同的字體系列(如果有)。這樣,我們就可以相對于文檔中大寫字母的字體大小來調整文檔中使用的小寫字母的字體大小。
語法
font-size-adjust: number | initial | none | inherit | revert | revert-layer | unset
登錄后復制
“font-size-adjust”可以采用上面列出的許多值。這些值幫助我們調整到通用的字體大小,無論使用哪種字體系列。
注意 – 在繼續(xù)示例之前,請確保使用 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 自動調整文檔中文本的字體大小。在第一個示例中,我們將小寫字母的字體大小調整為自定義字體默認字體大小的一半,在第二個示例中,我們將小寫字母的 font-size 調整為默認字體大小的一半默認字體。
以上就是如何使用CSS自動調整字體大小?的詳細內容,更多請關注www.92cms.cn其它相關文章!