1

How do you use a font-family's symbols, glyphs, ornaments and other features inside? For example how do you use a font's superscript?

1

You are after two different things

You insert special characters e.g copyright, accented letters, by using HTML entities e.g. © or © for ©. Here is a list https://www.freeformatter.com/html-entities.html

To achieve superscript, it has nothing to do with entities. In this case it is the size and placement of text.

Your HTML would look like this

<p>H<span class="atoms">2</span>SO<span class="atoms">4</span> is the chemical formula for sulphuric acid.
But how is this gold Au<span class="charge">2+</span>?</p>

the CSS would be

p { line-height: 1.5 }

.charge {
    position: relative;
    bottom: 0.5em;
    color: red;
    font-size: 0.8em;
}

.atoms {
    position: relative;
    top: 0.3em;
    color: blue;
    font-size: 0.8em;
}

This example comes from http://htmldog.com/techniques/superscript/ see it in action here http://htmldog.com/examples/superscript/

I have no association with either of the pages.

|improve this answer|||||
0

Heyy,

Another way to use superscript like this...

HTML CODE

  <!DOCTYPE html> 
<html> 
<head>  
</head> 

<body> 
    <p>Examples of superscript</p> 
    <p>2 <sup>4</sup>=16</p> 
    <p>X <sub>4</sub>+ Y<sub>6</sub></p> 
    <p>26<sup>th</sup> of March</p> 
</body> 
</html>      

CSS CODE

sup {
        vertical-align: super;
        font-size: medium;
        color: red;
    }
sub{
      vertical-align: sub;
        font-size: medium;
        color: blue;
    }

And you can refer this site for more details https://www.geeksforgeeks.org/html-subscript-superscript-tags/

For symbols you can refer this link https://www.w3schools.com/html/html_symbols.asp

|improve this answer|||||
  • Note that that <sup> and <sub> work fine without the additional CSS. – Ray Butterworth Mar 26 at 15:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.