How to set the font to be displayed in small capital letters with JavaScript?

JavascriptWeb DevelopmentFront End Scripts

<p style="">To set the font in small capital letters, use the<em>&nbsp;fontVariant</em> property.</p><h2>Example</h2><p style="">You can try to run the following code to set the font to be displayed in small capital letters with JavaScript &minus;</p><p style=""><a href="http://tpcg.io/oPaqWp" rel="nofollow noopener noreferrer" target="_blank">Live Demo</a></p><pre class="prettyprint notranslate">&lt;!DOCTYPE html&gt; &lt;html&gt; &nbsp; &nbsp;&lt;body&gt; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Heading 1&lt;/h1&gt; &nbsp; &nbsp; &nbsp; &lt;p id=&quot;myID&quot;&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text. &nbsp; &nbsp; &nbsp; &lt;/p&gt; &nbsp; &nbsp; &nbsp; &lt;button type=&quot;button&quot; onclick=&quot;display()&quot;&gt;Set Font Family and Font Variant&lt;/button&gt; &nbsp; &nbsp; &nbsp; &lt;script&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;function display() { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(&quot;myID&quot;).style.fontFamily = &quot;verdana,sans-serif&quot;; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(&quot;myID&quot;).style.fontVariant = &quot;small-caps&quot;; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &lt;/script&gt; &nbsp; &nbsp;&lt;/body&gt; &lt;/html&gt;</pre>
raja
Updated on 23-Jun-2020 12:56:31

Advertisements