font: 1em/1.5 Georgia, serif : font « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. font

font: 1em/1.5 Georgia, serif

   
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Using the font shorthand property</title>
  <style type="text/css">
    body { 
      font-size: 12px;
    }
    h1 {
      font: bold 1.2em/1.25em Georgia, serif;
      margin: 1.5em 0 0.25em 0;
    }
    p { 
        margin: 0; 
        width: 35em; 
      }
    p.one { 
        font: 1em/1.5 Georgia, serif; 
    }

  </style>
</head>
<body>
  <h1>font: 1em/1.5 Georgia, serif</h1>
  <p class="one">
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
  <h1>font: bold 1em/1.5 Verdana, sans-serif</h1>
  <p class="two">
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
  <h1>font: italic 1em/1.5 Georgia, serif</h1>
  <p class="three">
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
</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: bold 1em/1.5 Verdana, sans-serif
6.font: italic 1em/1.5 Georgia, serif;
7.Font color
8.font: status-bar
9.font: small-caption
10.font: message-box
11.font: menu
12.font: caption;
13.font: icon;
14.font: menu;
15.font: message-box;
16.font: small-caption;
17.font: status-bar;
18.font: italic small-caps bold 1.5em/3em sans-serif;
19.font: 32px "Monotype Corsiva";
20.font: 16px sans-serif;
21.font: bold 24px sans-serif;
22.font: italic bold small-caps 24px sans-serif;
23.font: 16px monospace;
24.This font is 1.2 times the default font, or 20 pixels.
25.font-size is inheritable
26.Making font size smaller and smaller
27.This font size is 50% bigger
28.This font size is 25% smaller
29.font style
30.font style no italic no oblique
31.font style oblique italic
32.Generic font
33.Multiple fonts
34.Using system font
35.Font properties
36.HTML code for displaying generic font families
37.HTML source code for displaying font size values
38.Using font sizes in pixels for alignment
39.Using keyword font property values
40.Change font size with inline style
41.Font inheritance
42.Font size inheritance
43.CSS Built-in Fonts
44.CSS1 Font Properties Example
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