CSS1 Font Properties Example : font « CSS

CSS1 Font Properties Example : font « CSS « HTML / CSS
   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>

<title>HTML/XHTML:  &raquo; CSS1 Font Properties Example</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />



<style type="text/css">

<!--

body {font-size: 14pt;}

.serif {font-family: serif;}

.sans-serif {font-family: sans-serif;}

.cursive {font-family: cursive;}

.fantasy {font-family: fantasy;}

.comic {font-family: Comic Sans MS;}

.xx-small {font-size: xx-small;}

.x-small {font-size: x-small;}

.small {font-size: small;}

.medium {font-size: medium;}

.large {font-size: large;}

.x-large {font-size: x-large;}

.xx-large {font-size: xx-large;}

.smaller {font-size: smaller;}

.larger {font-size: larger;}

.points {font-size: 18pt;}

.percentage {font-size: 200%;}

.italic {font-style: italic;}

.oblique {font-style: oblique;}

.weight {font-weight: 900;}

.smallcaps {font-variant: small-caps;}

-->

</style>

</head>

<body>



<div class="content">

  <h2>Font Family</h2>

  This text is in <span class="serif">Serif.</span><br />

  This text is in <span class="sans-serif">Sans-Serif.</span><br />

  This text is in <span class="cursive">Cursive.</span><br />

  This text is in <span class="fantasy">Fantasy.</span><br />

  Actual fonts can be specified like

  <span class="comic">Comic Sans MS</span><br />

  <h2>Font Sizing</h2>

  This is <span class="xx-small">xx-small text.</span><br />

  This is <span class="x-small">x-small text.</span><br />

  This is <span class="small">small text.</span><br />

  This is <span class="medium">medium text.</span><br />

  This is <span class="large">large text.</span><br />

  This is <span class="x-large">x-large text.</span><br />

  This is <span class="xx-large">xx-large text.</span><br />

  This is <span class="smaller">smaller text</span> than the rest.<br />

  This is <span class="larger">larger text</span> than the rest.<br />

  This is <span class="points">exactly 18 point text.</span><br />

  This is <span class="percentage">200% larger text.</span><br />

  <h2>Font Style, Weight, and Variant</h2>

  This text is <span class="italic">italic.</span><br />

  This text is <span class="oblique">oblique.</span><br />

  This text is <span class="weight">bold.</span><br />

  This text is in <span class="smallcaps">smallcaps.</span><br />

</div>



</body>

</html>
java2s.com | Contact Us | Privacy Policy
All other trademarks are property of their respective owners.