FONT PROPERTIES

NCD Style Sheet Guide v5.0

+ Font Family (Font Face)

{font-family: # }
{font-family: #, #, ..., -- }
#=family name (Helvetica, Arial, etc.)
--=generic family (serif, sans-serif, cursive, fantasy, monospace) 

<head><style type="text/css"><!--
font {font-family:Helvetica, 
      Arial, sans-serif}
--></style></head>
<font size="4">
Today is fine. 
</font>
Today is fine.

generic-family

{font-family:serif}
 Today is fine. 
{font-family:sans-serif}
 Today is fine. 
{font-family:cursive}
 Today is fine. 
{font-family:fantasy}
 Today is fine. 
{font-family:monospace}
 Today is fine.

+ Font Size

{font-size: # }
#=length (px, pt, in, cm,), %
#=xx-small, x-small, small, medium, large, x-large, xx-large 

{font-size:28pt}
 Today is fine. 
{font-size:50%}
 Today is fine. 
{font-size:xx-large}
 Today is fine. 
{font-size:x-large}
 Today is fine. 
{font-size:large}
 Today is fine. 
{font-size:middle}
 Today is fine. 
{font-size:small}
 Today is fine. 
{font-size:x-small}
 Today is fine. 
{font-size:small}
 Today is fine.

#=smaller, larger 

{font-size:smaller}
 Today is fine. 
{font-size:larger}
 Today is fine.

+ Font Weight

{font-weight: # }
#=normal, bold 

{font-weight:normal}
 Today is fine. 
{font-weight:bold}
 Today is fine.

#=bolder, lighter 

Today is 
<font style="font-weight:bolder">
 fine. </font>
 Today is fine. 
<B>Today is 
<font style="font-weight:lighter">
 fine. </font></B>
 Today is fine.

#=100, 200, 300, 400, 500, 600, 700, 800, 900 

{font-weight:100}
 Today is fine. 
{font-weight:200}
 Today is fine. 
{font-weight:300}
 Today is fine. 
{font-weight:400}
 Today is fine. 
{font-weight:500}
 Today is fine. 
{font-weight:600}
 Today is fine. 
{font-weight:700}
 Today is fine. 
{font-weight:800}
 Today is fine. 
{font-weight:900}
 Today is fine.

+ Font Style

{font-style: # }
#=normal, italic 

{font-style:normal}
 Today is fine. 
{font-style:italic}
 Today is fine.

#=oblique 

{font-style:oblique}
 Today is fine.

+ Font Variant

{font-variant: # }
#=normal, small-caps 

Hello.
<font style="font-style:small-caps">
Today is fine.
</font>
 Hello. Today is fine.

+ Font Grouping

{font: font-style font-variant font-wight
       font-size/line-height font-family} 

<head><style type="text/css"><!--
     DIV {font: bold italic 18pt/24pt Arial, "Times New Roman"}
--></style></head>
<div>
Today is fine.<br>
Tomorrow will be fine.<br>
And next day.... 
</div>
Today is fine.
Tomorrow will be fine.
And next day....


+ Font Embedding

@font-face {src: url(*)}

You can make embedding font data (.eot file) with Microsoft Weft. 

<style type="text/css">
H1.embed   {font-family: Andes;
            font-size: 24pt}
@font-face {font-family: Andes;
            src: url(ANDES0.eot)}
</style>

<H1>Today is fine.</H1>
<H1 CLASS="embed">Today is fine.</H1>

Today is fine.

Today is fine.




Style Sheet Guide | HTML Design Guide
Basic | Selector | Cascading | Font | Text | List | Color & Background |
Box | Box Positioning | Other|
Style Property LIST

BACK TO NCD HOME
Network Communication Design - http://www.ncdesign.org/
 Copyright & Publishing 1994-1999 Yuriko Ienaga yuri@ncdesign.org