Font Variant

Example Code


<!-- Codes by HTMLmagics -->
<p style="font-variant:small-caps;">This font is being rendered in small caps (<span style="font-variant:normal;">unless of course I override it!</span>).</p>
<p><a  style="font-size:11px;color:#999;" href="http://www.htmlmagics.blogspot.com/text/font-code.cfm">HTML font codes</a></p>


Result

This font is being rendered in small caps (unless of course I override it!).

HTML font codes

Font Style

Example Code


<!-- Codes by HTMLmagics -->
<p style="font-style:normal;">This font has a font style of 'normal' (i.e. not italic or oblique).</p>
<p style="font-style:italic;">This font has a font style of 'italic'.</p>
<p style="font-style:oblique;">This font has a font style of 'oblique'.</p>
<p style="font-style:inherit;">This font has a font style of 'inherit' (it inherits its style from its parent).</p>
<p><a  style="font-size:11px;color:#999;" href="http://www.htmlmagics.blogspot.com/text/font-code.cfm">HTML font codes</a></p>

Result

This font has a font style of 'normal' (i.e. not italic or oblique).

This font has a font style of 'italic'.

This font has a font style of 'oblique'.

This font has a font style of 'inherit' (it inherits its style from its parent).

HTML font codes

Font Weight

Example Code


<!-- Codes by HTMLmagics -->
<p style="font-weight:normal;">This text has a font-weight value of: normal</p>
<p style="font-weight:bold;">This text has a font-weight value of: bold</p>
<p style="font-weight:bolder;">This text has a font-weight value of: bolder</p>
<p style="font-weight:lighter;">This text has a font-weight value of: lighter</p>
<p style="font-weight:100;">This text has a font-weight value of: 100</p>
<p style="font-weight:200;">This text has a font-weight value of: 200</p>
<p style="font-weight:300;">This text has a font-weight value of: 300</p>
<p style="font-weight:400;">This text has a font-weight value of: 400</p>
<p style="font-weight:500;">This text has a font-weight value of: 500</p>
<p style="font-weight:600;">This text has a font-weight value of: 600</p>
<p style="font-weight:700;">This text has a font-weight value of: 700</p>
<p style="font-weight:800;">This text has a font-weight value of: 800</p>
<p style="font-weight:900;">This text has a font-weight value of: 900</p>
<p><a  style="font-size:11px;color:#999;" href="http://www.htmlmagics.blogspot.com/text/font-code.cfm">HTML font codes</a></p>


Result

This text has a font-weight value of: normal

This text has a font-weight value of: bold

This text has a font-weight value of: bolder

This text has a font-weight value of: lighter

This text has a font-weight value of: 100

This text has a font-weight value of: 200

This text has a font-weight value of: 300

This text has a font-weight value of: 400

This text has a font-weight value of: 500

This text has a font-weight value of: 600

This text has a font-weight value of: 700

This text has a font-weight value of: 800

This text has a font-weight value of: 900

HTML font codes

Example Code

Example Code

<!-- Codes by HTMLmagics -->
<p style="font-style:normal;">This font has a font style of 'normal' (i.e. not italic or oblique).</p>
<p style="font-style:italic;">This font has a font style of 'italic'.</p>
<p style="font-style:oblique;">This font has a font style of 'oblique'.</p>
<p style="font-style:inherit;">This font has a font style of 'inherit' (it inherits its style from its parent).</p>
<p><a  style="font-size:11px;color:#999;" href="http://www.htmlmagics.blogspot.com/text/font-code.cfm">HTML font codes</a></p>


Result

This font has a font style of 'normal' (i.e. not italic or oblique).

This font has a font style of 'italic'.

This font has a font style of 'oblique'.

This font has a font style of 'inherit' (it inherits its style from its parent).

HTML font codes

Font Stretch

Example Code


<!-- Codes by HTMLmagics -->
<p>This text has not had the font-stretch applied.</p>
<p style="font-stretch:wider;">This text has had the font-stretch property applied.</p>
<p style="font-stretch:narrower;">This text has had the font-stretch property applied.</p>
<p style="font-stretch:ultra-condensed;">This text has had the font-stretch property applied.</p>
<p style="font-stretch:extra-condensed;">This text has had the font-stretch property applied.</p>
<p style="font-stretch:condensed;">This text has had the font-stretch property applied.</p>
<p style="font-stretch:semi-condensed;">This text has had the font-stretch property applied.</p>
<p style="font-stretch:semi-expanded;">This text has had the font-stretch property applied.</p>
<p style="font-stretch:expanded;">This text has had the font-stretch property applied.</p>
<p style="font-stretch:extra-expanded;">This text has had the font-stretch property applied.</p>
<p style="font-stretch:ultra-expanded;">This text has had the font-stretch property applied.</p>
<p><a  style="font-size:11px;color:#999;" href="http://www.htmlmagics.blogspot.com/text/font-code.cfm">HTML font codes</a></p>


Result

This text has not had the font-stretch applied.

This text has had the font-stretch property applied.

This text has had the font-stretch property applied.

This text has had the font-stretch property applied.

This text has had the font-stretch property applied.

This text has had the font-stretch property applied.

This text has had the font-stretch property applied.

This text has had the font-stretch property applied.

This text has had the font-stretch property applied.

This text has had the font-stretch property applied.

This text has had the font-stretch property applied.

HTML font codes

Font Size Adjust

Example Code



<!-- Codes by HTMLmagics -->
<p>This text has not had the font-size-adjust applied.</p>
<p style="font-size-adjust: 0.58;">This text has had the font-size-adjust applied.</p>
<p><a  style="font-size:11px;color:#999;" href="http://www.htmlmagics.blogspot.com/text/font-code.cfm">HTML font codes</a></p>




Result

This text has not had the font-size-adjust applied.

This text has had the font-size-adjust applied.

HTML font codes

Font Size

Example Code


<!-- Codes by HTMLmagics -->
<p style="font-size:14px;">This font has been specified using pixels.</p>
<p style="font-size:14pt;">This font has been specified using points.</p>
<p style="font-size:140%;">This font has been specified using a percentage value.</p>
<p style="font-size:large;">This font has been specified using an absolute value (large).</p>
<p style="font-size:larger">This font has been specified using a relative value (larger).</p>
<p><a  style="font-size:11px;color:#999;" href="http://www.htmlmagics.blogspot.com/text/font-code.cfm">HTML font codes</a></p>


Result

This font has been specified using pixels.

This font has been specified using points.

This font has been specified using a percentage value.

This font has been specified using an absolute value (large).

This font has been specified using a relative value (larger).

HTML font codes

Font Family

Example Code


<!-- Codes by HTMLmagics -->
<p style="font-family:Garamond, Georgia, Times, Serif">This text has had it's font changed using the font-family property.</p>
<p><a  style="font-size:11px;color:#999;" href="http://www.htmlmagics.blogspot.com/text/font-code.cfm">HTML font codes</a></p>

This text has had it's font changed using the font-family property.

HTML font codes

Result

The font Property

Example Code


<!-- Codes by HTMLmagics -->
<p style="font:italic small-caps bold 18px/24px Garamond, Georgia, Times, Serif;width:200px;">This amazing piece of text is using font code to set its font properties. As you can see, the font property can set everything from font-variant to line-height, from font-family to font-style.</p>
<p><a  style="font-size:11px;color:#999;" href="http://www.htmlmagics.blogspot.com/text/font-code.cfm">HTML font codes</a></p>


Result

This amazing piece of text is using font code to set its font properties. As you can see, the font property can set everything from font-variant to line-height, from font-family to font-style.

HTML font codes