CSS Fonts Module Level 3 Exmple

Font family: the font-family property

serif

Serif fonts represent the formal text style for a script. This often means but is not limited to glyphs that have finishing strokes, flared or tapering ends, or have actual serifed endings (including slab serifs).

sans-serif

Glyphs in sans-serif fonts, as the term is used in CSS, are generally low contrast (vertical and horizontal stems have the close to the same thickness) and have stroke endings that are plain -- without any flaring, cross stroke, or other ornamentation.

cursive

Glyphs in cursive fonts generally use a more informal script style, and the result looks more like handwritten pen or brush writing than printed letterwork.

fantasy

Fantasy fonts are primarily decorative or expressive fonts that contain playful representations of characters.

monospace

The sole criterion of a monospace font is that all glyphs have the same fixed width.

Font weight: the font-weight property

• A

• A

• A

• A

• A

• A

• A

• A

• A

• 永

• 永

• 永

• 永

• 永

• 永

• 永

• 永

• 永

Font width: the font-stretch property

• あ

• あ

• あ

• あ

• あ

• あ

• あ

• あ

• あ

Font style: the font-style property

• a

• a

• a

Font size: the font-size property

absolute-size

• あ

• あ

• あ

• あ

• あ

• あ

• あ

relative-size

For example, if the parent element has a font size of ‘medium’, a value of ‘larger’ will make the font size of the current element be ‘large’.

If the parent element's size is not close to a table entry, the user agent is free to interpolate between table entries or round off to the closest one. The user agent may have to extrapolate table values if the numerical value goes beyond the keywords.

Relative sizing: the font-size-adjust property

bb

Shorthand font property: the font property

The font used for labeling small controls.

The @font-face rule

この文章は、お使いのパソコンに新ゴがインストールされていなければ、サーバーに置いたフロップデザインフォント（オープンソースフォント）を利用・表示します。

ひらがな、カタカナ、アルファベット、数字の著作権はフロップデザインに帰属します。このフォントをご使用になるには、解凍したダウンロードファイルに含まれる「M+FONT-TESTFLIGHT」「IPAフォントライセンス」の2つの 内容を読みください。It is requested to read and accept “IPA Font License and M+FONT” before downloading Font.　ダウンロードはページ下側のフォントのダウンロードボタンを押してダウンロードして下さい。
フォントは以下のライセンスに準じます。フォント同梱のテキストをお読み下さい。
* IPAフォント (IPA_Font_License_Agreement_v1.0.txt)
* M+ (LICENSE_J,LICENSE_E)
Copyright(c) 2013 M+ FONTS PROJECT　Copyright(c) Information-technology Promotion Agency, Japan (IPA), 2003-2013.
元となるIPAフォントに置き換える場合 IPAフォントのページでIPAゴシックを入手して下さい。M+はあらゆる改変の有無に関わらず、また商業的な利用であっても、自由に利用、複製、再配布することができるオープンソースのフォントです。

@font-faceルール内でfont-weightプロパティを「太字」で指定すると太字のフォントとして登録することができます。
たとえば、ある段落にfont-weightプロパティを太字として指定すると、前述の「太字」として指定したフォントが適用されます。

この文章は通常の太さのフォントに「太字」を適用しました。

とくに文字は、時間や場所を超える情報の伝達手段として発展してきたのです。 かつて石に彫られたり、木に筆で書かれていた文字は、やがて木版や金属活字で印刷されるようになり、写真植字を経て、現代ではDTPシステムによるデジタルフォントが数多く使われるようになりました。

People have been informed the knowledge and ideas to the others by speaking languages, using letters since early times. Especially letters have been expanded as methods of communication beyond time and place.

Kerning: the font-kerning property

auto

Specifies that kerning is applied at the discretion of the user agent

プロポーショナルフォントの文字同士の間隔（アキ）を調整する技法のこと。

normal

Specifies that kerning is applied

プロポーショナルフォントの文字同士の間隔（アキ）を調整する技法のこと。

none

Specifies that kerning is not applied

プロポーショナルフォントの文字同士の間隔（アキ）を調整する技法のこと。

Ligatures: the font-variant-ligatures property

common-ligatures

• fi

• fi

contextual

• labor of love

• labor of love

Subscript and superscript forms: the font-variant-position property

sub

• C7

• H16

• N5

• O13

• P3

super

• a2

• a[2a]

• a[2a]

Numerical formatting: the font-variant-numeric property

diagonal-fractions

• 21/3

• 21/3

stacked-fractions

• 21/3

• 21/3

slashed-zero

• 4000

• 4000

East Asian text rendering: the font-variant-east-asian property

jis78

• 麹町

• 麹町

traditional

• 大学

• 大学

proportional-width

• 欧文フォント

• 欧文フォント

ruby

• 新幹線しんかんせん