Open In App

SVG font-style Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads