CSS FONT-FAMILY

Written by jon on 8:01 AM
Font families can be divided into two groups: serif and san serif. A san serif font does not include the small lines at the end of characters, while a serif font does include these small lines. When choosing which kind you prefer, remember that studies have shown that sans serif fonts are much easier to read on a computer monitor as opposed to a serif font.

Example
body {font-family: courier, serif}

p {font-family: arial, “lucida console”, sans-serif}

<p style=”font-family: arial, ‘lucida console', sans-serif”>

Possible Values
Value Description
family-name

generic-family

A prioritized list of font family names and/or generic

No Comment comment | Posted in »  

CSS FONT-SIZE

Written by jon on 8:00 AM
You can manipulate the size of your fonts by using values, percentages, or key terms. Using values are useful if you do not want the user to be able to increase the size of the font because your site will look incorrect if they did so. Percentages are great when you want to change the default font, but do not want to set a static value

Example
body {font-size: x-large}
p {font-size: 10px}
Possible Values
xx-small

x-small

small

medium

large

x-large

xx-large

Sets the size of the font to different sizes, from xx-small to xx-large
smaller Sets the font-size to a smaller size than the parent element
larger Sets the font-size to a larger size than the parent element
length Sets the font-size to a fixed size
% Sets the font-size to a % of the parent element













No Comment comment | Posted in »  

CSS FONT-WEIGHT

Written by jon on 7:58 AM
If you want to control the weight of your font ( its thickness ), using font weight is the best way to go about it. We suggest that you only use font-weight in multiples of 100 (e.g. 200, 300, etc) because any less and you probably will not see any difference. The values range from 100(thin)-900(thick).

Example
p {font-weight: bold}
Possible Values
Value Description
normal Defines normal characters
bold Defines thick characters
bolder Defines thicker characters
lighter Defines lighter characters
100

200

300

400

500

600

700

800

900

Defines from thin to thick characters. 400 is the same as normal, and
No Comment comment | Posted in »  

CSS FONT-VARIANT

Written by jon on 7:41 AM
CSS Font Variant allows you to convert your font to all small caps. Note: not every font supports CSS Font Variant, so be sure to test before you publish.

Example
p {font-variant: small-caps}
Possible Values
Value Description
normal The browser displays a normal font
small-caps The browser displays a small-caps font

No Comment comment | Posted in »  

CSS FONT-STYLE

Written by jon on 7:39 AM
CSS Font-Style is where you define if your font will be italic or not. Possible key terms are the following: italic, oblique, and normal.

Example
body {font-style: italic}
Possible Values
Value Description
normal The browser displays a normal font
italic The browser displays an italic font
oblique The browser displays an oblique font

No Comment comment | Posted in »  

CSS FONT-STRETCH

Written by jon on 7:37 AM
The font-stretch property is used to expand or contract (condense) the horizontal width of the font. The change is relative to the normal width of the font as displayed by the browser.

narrower
The narrower value contracts the font to the next smaller width.

wider
The wider value expands the font to the next larger width. The order descends from narrowest to widest in value. The normal value is the normal width of the font as displayed by the browser.

Example
h2 {font-stretch: ultra-condensed}
Possible Values
Value Description
normal Sets the scale of condensation or expansion to normal
wider Sets the scale of expansion to the next expanded value
narrower Sets the scale of condensation to the next condensed value
ultra-condensed

extra-condensed

condensed

semi-condensed

semi-expanded

expanded

extra-expanded

ultra-expanded

Sets the scale of condensation or expansion of the font-family. “ultra-condensed” is the most condensed (narrowest) value, and “ultra-expanded” is the most expanded (widest) value

No Comment comment | Posted in »  

CSS FONT

Written by jon on 7:28 AM
With CSS you are given great control over the way your text is displayed. You can change the size, color, style, and more. You probably already knew how to make text bold or underlined, but did you know you could resize the size of your font using percentages? Let us begin the lesson with an easy and important font attribute, color!

Example
p {font: 12px arial}
p {font: italic small-caps bold 12px arial}
p {font: oblique small-caps 900 12px/14px arial}
p {font: menu}
Possible Values
Value Description
font-style

font-variant

font-weight

font-size/line-height

font-family

Sets the properties for a font. The line-height value sets the space between lines. The value can be a number, a %, or a font size
caption Defines the font that are used by captioned controls (like buttons, drop-downs, etc.)
icon Defines the fonts that are used by icon labels
menu Defines the fonts that are used by dropdown menus
message-box Defines the fonts that are used by dialog boxes
small-caption
status-bar Defines the fonts that are used by window status bars


No Comment comment | Posted in »  

CSS FONT-SIZE-ADJUST

Written by jon on 10:08 AM
Specifies an aspect value for an element that will preserve the x-height of the first-choice font. If the aspect value is high, the font will be legible when it is set to a smaller size.

Example
h2 {font-size-adjust: 0.58}
Possible Values
Value Description
none Do not preserve the font's x-height if the font is unavailable
number Defines the aspect value ratio for the font

The formula to use:
font-size of first-choice font*(font-size-adjust/aspect value of available font) = font-size to apply to available font

Example:

If 14px Verdana (aspect value of 0.58) was unavailable, but an available font had an aspect value of 0.46, the font-size of the substitute would be 14 * (0.58/0.46) = 17.65px

No Comment comment | Posted in »  
Subscribe to: Posts (Atom)

RECENT COMMENTS

SUBSCRIBE TO CSS3 EXAMPLES
 Subscribe to css3 Examples via RSS
Or, subscribe via email:
Find CSS3 Examples Entries :