How to auto adjust font size using CSS ?
The font-size-adjust property of CSS tells the browser to adjust the font size of the text to the same size regardless of font family. When the first chosen font is not available, the font-size-adjust property allows you more control over the font size. If a font isn’t available, the window defaults to the second font defined. This could lead to a significant shift in font size. Using the font-size-adjust property to stop this. The size difference between the lowercase letter “x” and the uppercase letter “X” is the “aspect value” of all fonts. When the browser knows the “aspect value” of the first font, it will determine what font-size to use when viewing text in the second font.
Syntax:
font-size-adjust: number|none|initial|inherit;
Below are the examples that illustrates the use of font-size-adjust property.
Example:
HTML
<!DOCTYPE html><html> <head> <style> div.a {font-family: Helvetica;} div.b {font-family: 'sans-serif';} #div1, #div2 {font-size-adjust: 0.74;} </style></head> <body> <h1 style = "color:green;text-align:center;"> GeeksforGeeks </h1> <h2 style = "color:blue;text-align:left;"> Font Size Adjust Property </h2> <h2 style ="color:orange;text-align:left;"> Divs with same Font Size Adjust Property: </h2> <div id="div1" class="a"> We offer a range of services to help you learn, develop, and have fun! Free tutorials, millions of posts, live, online, and classroom classes, regular coding contests, industry expert webinars, internships, and career openings are all available. </div><br> <div id="div2" class="b"> Sandeep Jain is the founder of 'GeeksforGeeks,' an IIT Roorkee alumni group. He enjoys finding the most effective solutions to programming problems. </div> <h2 style = "color:red;text-align:left;"> Divs without same Font Size Adjust Property: </h2> <div class="a"> Apart from GeeksforGeeks, he has worked as a web developer for DE Shaw and Co. and as an assistant professor at JIIT Noida. </div><br> <div class="b"> GeeksforGeeks.org was founded with the aim of providing well-written, well-considered, and well-explained answers to specific questions. If you're interested in mastering algorithms, data structures, or just the programming language itself, GeeksforGeeks has you covered! </div></body> </html> |
Output :
Auto Adjust Font Size using CSS
Browser Support:
Only Firefox currently supports the CSS font-size-adjust property by default.
Please Login to comment...