Open In App

SVG font-size-adjust Attribute

Last Updated : 31 Mar, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

The font-size-adjust attribute allows you to set the aspect value for an element that will set the x-height of the first choice font in the given substitute font. This attribute adjusts the font size x-height according to the font-family.

Syntax:

font-size-adjust="size"

Attribute Values:

  • decimal: Decimal at which we want to adjust the size.

We will use the font-size-adjust attribute for adjusting the size of the font.

Example 1: 

HTML




<!DOCTYPE html> 
<html>
<body
    <svg width="600" height="80" viewBox="0 0 500 80"
    xmlns="http://www.w3.org/2000/svg">
        <text y="50" x="20" font-family="Times, serif"
              font-size="20px" font-size-adjust="0.50">
            this is an example of smaller text
        </text>
    </svg>
</body
</html>


Output:

Example 2: 

HTML




<!DOCTYPE html> 
<html
  
<body
    <svg width="700" height="500" viewBox="0 0 500 800"
         xmlns="http://www.w3.org/2000/svg">
        <text y="50" x="20" font-family="Times, serif" 
              font-size="60px" font-size-adjust="0.50">
            this is an example of larger text
        </text>
    </svg>
</body
</html


Output:



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads