Home arrow DHTML arrow Page 3 - Floats, Fonts, and Other Style Sheet Property References
DHTML

Floats, Fonts, and Other Style Sheet Property References


In the latest part of our continuing series on style sheet properties, you'll learn about floats, fonts, and more. This article is excerpted from chapter four of Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Copyright © 2006 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 5 stars5 stars5 stars5 stars5 stars / 6
September 27, 2007
TABLE OF CONTENTS:
  1. · Floats, Fonts, and Other Style Sheet Property References
  2. · Fonts
  3. · More on Fonts
  4. · Height

print this article
SEARCH DEVARTICLES

Floats, Fonts, and Other Style Sheet Property References - More on Fonts
(Page 3 of 4 )

font-stretch
IE n/a NN n/a Moz n/a Saf n/a Op n/a CSS <2.1

Inherited: Yes

Sets the rendered font to a letter-spacing relative of the specified font family.

CSS Syntax

font-stretch: stretchType | normal

Value

For an absolute size, one of the following constants: ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | extra-expanded | ultra-expanded . For a relative size, one of the following constants: narrower | wider .

Initial Value         normal

Applies To            All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.fontStretch

font-style
IE 4 NN 4 Moz all Saf all Op all CSS 1

Inherited: Yes

Determines whether the element is rendered in a normal (Roman), italic, or oblique font style. If the font-family includes font faces labeled Italic and/or Oblique, the setting of the font-style property summons those particular font faces from the browser’s system. But if the specialized font faces are not available in the system, the normal font face is usually algorithmically slanted to look italic. Output sent to a printer with such font settings relies on the quality of arbitration between the client computer and printer to render an electronically generated italic font style. Although personal computer software typically includes other kinds of font rendering under the heading of “Style,” see font-variant and font-weight for other kinds of font “styles.”

CSS Syntax

font-style: fontStyle

Value

One of the following constants: normal | italic | oblique. Browsers tend to treat italic and oblique settings the same.

Initial Value         normal

Example               h2 em {font-style: italic}

Applies To            All elements .

Object Model Reference

[window.]document.getElementById("elementID").style.fontStyle

font-variant
IE 4 NN n/a Moz all Saf 1.3/2 Op all CSS 1

Inherited: Yes

Determines whether the element should be rendered in all uppercase letters in such a way that lowercase letters of the source code are rendered in smaller uppercase letters. If a font family contains a small caps variant, the browser should use it automatically. More likely, however, the browser calculates a smaller size for the uppercase letters that take the place of source code lowercase letters. In practice, Internet Explorer for Windows prior to Version 6 renders the entire source code content as uppercase letters of the same size as the parent element’s font, regardless of the case of the source code.

CSS Syntax

font-variant: fontVariant

Value         Any of the following constant values: normal | small-caps.

Initial Value         normal

Example                       em {font-variant: small-caps}

Applies To                     All elements.

Alphabetical Property Reference

font-weight

Object Model Reference

[window.]document.getElementById("elementID").style.fontVariant

font-weight
IE 4 NN n/a Moz all Saf all Op all CSS 1

Inherited: Yes

Sets the weight (boldness) of the element’s font. CSS provides a weight rating scheme that is more granular than most browsers render on the screen, but the finely tuned weights may come into play when the content is sent to a printer. The scale is a numeric rating from 100 to 900 at 100-unit increments. Therefore, a font-weight of 100 is the least bold that can be displayed, whereas 900 is the boldest. A setting of normal (the default weight for any font) is equivalent to a font-weight value of 400 ; the standard bold setting is equivalent to 700 . Other settings ( bolder and lighter ) let you specify a weight relative to the parent element’s weight.

The CSS2 specification offers guidelines about how the weight values should correspond to font family names and internal characteristics of some font definition formats. For example, the OpenType font definition format provides slots for nine font weights. In this case, the numeric font-weight property values map directly to the weight definitions in that font. If the font family contains a face with a name that contains the word Medium and one labeled Book, Regular, Roman, or Normal, the Medium face is equated with a weight value of 500 (whereas the other is at 400 ). All font face names including the word Bold are equated with a weight of 700 . For font families that don’t have all nine weights assigned, the browser should do its best to interpolate, but it is very likely that some weight values generate fonts of the same weight as other values.

CSS Syntax

font-weight: fontWeight

Value

Any of the following constant values: bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 .

Initial Value         normal

Example                        p em {font-weight: bolder}

Applies To                        All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.fontWeight

Next: Height >>

blog comments powered by Disqus
DHTML ARTICLES

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials