Skip to content
Related Articles

Related Articles

Improve Article

SVG font-style Attribute

  • Last Updated : 25 Oct, 2020

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :