FONT PROPERTIES

NCD Style Sheet Guide v6.0

Sponsor's ADs:

+ 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:xx-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.

+ Text Decoration

{text-decoration: #}
#=none, underline, line-through

{text-decoration:none}
Today is fine.
{text-decoration:underline}
Today is fine.
{text-decoration:line-through}
Today is fine.

#=overline 

{text-decoration:overline}
Today is fine.

#=blink 

{text-decoration:blink}
Today is fine.

Underline Position {text-underline-position: #}
#=above, below

{text-decoration:underline;
 text-underline-position:above}
Today is fine.

#=auto

This property is optimized for Asian language (Japanese Sample).



+ Text Transform

{text-transform: #}
#=none, capitalize, uppercase, lowercase

{text-transform:none}
Today is fine.
{text-transform:capitalize}
Today is fine.
{text-transform:uppercase}
Today is fine.
{text-transform:lowercase}
Today is fine.


+ Spacing

Letter Spacing {letter-spacing: # }
#=normal, length (px, pt, in, cm, em)

<div style="letter-spacing:0.5em">
Today is fine.
</div>
Today is fine.

Word Spacing {word-spacing: # }
#=normal, length (px, pt, in, cm, em)

Internet Explorer Macintosh version 4.5 or later support word spacing.

<div style="word-spacing:10">
Today is fine.
</div>
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 | Table | Position & Format | Other|
Selector List | Property List

BACK TO NCD HOME
Network Communication Design - /
 Copyright & Publishing 1994-2008 Network Communication Design