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






  1. HTML / CSS
  2. CSS
  3. font

CSS1 Font Properties Example

   
<!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>








Related examples in the same category

1.Font Property and Purpose
2.'font' Example
3.font shortcut
4.Font shortcut: font: bold italic 2em Georgia, Times, "Times New Roman", serif;
5.font: 1em/1.5 Georgia, serif
6.font: bold 1em/1.5 Verdana, sans-serif
7.font: italic 1em/1.5 Georgia, serif;
8.Font color
9.font: status-bar
10.font: small-caption
11.font: message-box
12.font: menu
13.font: caption;
14.font: icon;
15.font: menu;
16.font: message-box;
17.font: small-caption;
18.font: status-bar;
19.font: italic small-caps bold 1.5em/3em sans-serif;
20.font: 32px "Monotype Corsiva";
21.font: 16px sans-serif;
22.font: bold 24px sans-serif;
23.font: italic bold small-caps 24px sans-serif;
24.font: 16px monospace;
25.This font is 1.2 times the default font, or 20 pixels.
26.font-size is inheritable
27.Making font size smaller and smaller
28.This font size is 50% bigger
29.This font size is 25% smaller
30.font style
31.font style no italic no oblique
32.font style oblique italic
33.Generic font
34.Multiple fonts
35.Using system font
36.Font properties
37.HTML code for displaying generic font families
38.HTML source code for displaying font size values
39.Using font sizes in pixels for alignment
40.Using keyword font property values
41.Change font size with inline style
42.Font inheritance
43.Font size inheritance
44.CSS Built-in Fonts
45.This demonstrates the use of the font-variant: small-caps; effect.
46.Relative font size
47.Test font at 100%
48.font: 12px sans-serif;
49.font-family: monospace;
50.font-variant: small-caps;
51.h4 font-weight: normal;
52.Using inline style to control font size for span
53.first-child font-weight: bold;
54.This font is 1 em in size and sans-serif.
55.Font style shortcut
56.Use font
57.This font is italic, small-caps, bold, 1em in size, with a 1.5 em line height and a sans-serif font.
58.make text that's italic, bold, small-caps,24 pixel sans-serif, which looks like a comic book font
59.Overlay font
60.font color 2
61.System font: caption
62.System font: icon
63.System font: menu
64.System font: message-box
65.System font: small-caption
66.System font: status-bar