SVG font-style Attribute

Last Updated : 31 Mar, 2022

The font-style attribute is used to specify whether the text is to be rendered using a normal, italic, or oblique face style. 

Syntax:

font-style="style"

Attribute Values: The attribute can have the following values:

  • normal: This specifies that the text should be displayed in the normal form.
  • italic: This specifies that the text should be displayed in the italic form.
  • oblique: This specifies that the text should be displayed in the oblique form.

We will use the font-style attribute for styling the font in the following examples:

Example 1: 

HTML
<!DOCTYPE html>
<html>

<body>
    <svg viewBox="0 0 250 300" 
        xmlns="http://www.w3.org/2000/svg">
        
        <text y="20" x="5" font-size="10px" 
            font-style="normal">
            Normal font style
        </text>

        <text y="35" x="5" font-size="10px" 
            font-style="italic">
            Italic font style
        </text>
    </svg>
</body>

</html>

Output:

Example 2: 

HTML
<!DOCTYPE html>
<html>

<body>
    <svg viewBox="0 0 250 300" 
        xmlns="http://www.w3.org/2000/svg">
        
        <text y="15" x="5" font-size="10px" 
            font-style="oblique">
            oblique font style
        </text>
    </svg>
</body>

</html>

Output:

Comment

Explore