Related Articles

Related Articles

SVG font-size-adjust Attribute
  • Last Updated : 30 Oct, 2020

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

Example 2: 

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :