Skip to content
Related Articles

Related Articles

Improve Article

CSS font-variant-position Property

  • Last Updated : 16 Jul, 2020

The font-variant-position of CSS is used to alter the position of the font as a superscript, subscript, or normal font. These are positioned relative to the baseline of the font, which remains unchanged.

Syntax:

font-variant-position: normal | sub | super

Property values:

  • Normal: Normal deactivates superscript and subscript glyphs. If not present any super or sub than the font style will be to the baseline.

    Syntax:

    font-variant-position: normal

    Example :






    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport"
            content="width=device-width,
                     initial-scale=1.0">
      <title>Document</title>
    </head>
    <style>
      em{
        font-style: unset;
      }
      .font{
        font-variant-position: normal;
      }
    </style>
    <body>
      <em>
        (geeksforgeeks)
        <em class="font">
          2
        </em>
      </em>
    </body>
    </html>

    Output:

    • Super: Super activates superscript and alternate glyphs.

      Syntax:

      font-variant-position: normal

      Example:




      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" 
              content="width=device-width, 
                       initial-scale=1.0">
        <title>Document</title>
      </head>
      <style>
        .font{
          font-variant-position: super;
        }
      </style>
      <body>
        <em>
          (geeksforgeeks)
          <em class="font">
            2
          </em>
        </em>
      </body>
      </html>

      Output:

      • Sub: Sub activates subscript and alternate glyphs.

        Syntax:

        font-variant-position: sub

        Example:




        <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" 
                content="width=device-width,
                         initial-scale=1.0">
          <title>Document</title>
        </head>
        <style>
          .font{
            font-variant-position: sub;
          }
        </style>
        <body>
          <em>
            H
            <em class="font">
              2
            </em>
            O
            <em class="font">
              2
            </em>
          </em>
        </body>
        </html>

        Output:

      Browsers Supported:

      • Mozilla Firefox

      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 :