introduction to css css fonts - fort collins, co copyright © xtr systems, llc cascading style...

Introduction to CSSCSS Fonts - Fort Collins, CO

Copyright © XTR Systems, LLC

CascadingStyle Sheets -Font Control

Instructor: Joseph DiVerdi, Ph.D., MBA



Font Properties

• Several Different Properties Will Be Discussed– Font Families– Font Weight– Font Size– Font Style– Font Variations– Combined Font Property



Font Issues

• Font Selection & Control Is a Much Desired & Appreciated Feature of CSS

• However, No Consistent Font Use/control on the Web– No Uniform Scheme of Describing Fonts & Their

Variants

• Similar to Desktop Publishing Issues– Try Sharing a Document With Font Not Present on

Your Reader's Machine



Font Issues

• Starting to Sound Like a Broken Record– Great Feature– Can't Use It Because Too Few Browsers Support It

• Read the Specification– Boring but Very Helpful– Understand the Level of Support Available

• Understand Your Viewers• Use CSS As the Icing on a Cake



Font Family

• Selects The Font to Be Used– Provides for First, Second, Third, ... Choice

selector { font-family: value1, value2, value3, ... ; }

• Note Unique Syntax– Separate Alternate Values by Commas

H1 {

font-family: verdana, arial, helvetica;

}



Generic Font Families

• CSS Defines Several Generic Font Families– Useful As a Backup

• When Your Requested Fonts Are Not Available On Client

– Five Available Using Keywords:• serif

• sans-serif

• monospace

• cursive

• fantasy

• Good Practice is to Use Generic Font Family For Last Choice in font-family

H1 { font-family: verdana, arial, helvetica, serif; }




• Serif– Proportional

• Characters Each Have Differing Widths• Spacing Flows With Text

– Serif• Characters Have Decorations at Ends of Strokes• Traditionally Thought to Be Easier on the Eyes

– Examples• Times, Garamond, New Century Schoolbook

This sentence is presented in the Times font.




• Sans Serif– Proportional

• Characters Each Have Differing Widths• Spacing Flows With Text

– No Serif• Characters Do Not Have Decorations at Ends of Strokes• Traditionally Thought to Possess Cleaner Presentation

– Examples• Helvetica, Geneva, Verdana, Arial

This sentence is presented in Verdana.




• Monospace– Not Proportional

• Characters Each Have Same Width

– May or Not Have Serif• Emulate Old-fashioned Typewriters

– Examples• Courier, New Courier, Profont




• Cursive– Proportional

• Characters Each Have Differing Widths

– No Serif but Often Greater Decorations• (Attempt To) Emulate Human Handwriting

– Examples• Zapf Chancery & Other Zapfs

This sentence is displayed in Zapf Chancery.




• Fantasy– Probably Proportional

• Characters Each Have Differing Widths

– No Serif but Often Greater Decorations• This Just Defies Description

– Examples• Klingon



Using Quotation Marks

• Required When Font Name Contains Certain Characters– Non-Alphameric

• Anything Besides a-z or A-Z

• Either Apostrophe ' or Quotes " Are OK

font-family: { "Times New Roman", serif; }

font-family: { 'Times New Roman', serif; }



Font Weight

• Controls the Weight or Heft of a Fontfont-weight: normal | bold | bolder | lighter | <number>

<number> = 100, 200, 300, ... , 900

• Existing Bold Tag Is Easily Emulated:

B { font-weight: bold; }

• All Features Are Very Well Supported



Font Style

• Controls the Style of a Fontfont-style: normal | italic | oblique

• italic Renders the Font on a Slant• oblique Renders the Font on a Slant & Bold

• normal & italic Are Well Supported• oblique Is Usually Rendered As Italic

– Roll Your Own....oblique { font-style: italic; font-weight: bold; }



Font Variant

• Provides a Variation of a Fontfont-variant: normal | small-caps

• small-caps LOOKS LIKE THIS

• small-caps Is Poorly Supported

– Do It Yourself....small_caps { text-transform: uppercase; font-size: smaller; }



Font Shorthand

H1 {

font-family: Arial, sans-serif;

font-weight: bolder;

font-size: medium;

font-style: italic;

line-height: 150%;

font-variant: small-caps;

}

• There Is a Shorthand Method for Specifying These Properties



Specified Using Font

• Font Is Shorthand for All Font PropertiesH1 {

font: italic bolder small-caps medium /150% Arial, sans-serif;

}

• Syntax Is Very Flexible– But a Bit Complicated...



Specified using Font

H1 {

font: [ <font-style> || <font-variant> || <font-weight> ]?

<font-size> [ / <line-height> ]? <font-family>

}

– Optional Style, Variant, & Weight• Any Zero, One, Two, or Three, in Any Order

– Required Size

– Optional Line-height• Must Be Preceded by /

– Required Family• As Comma Delimited List

• Support Is Slightly Worse Than Individual Properties



Specified Using Font

• Several Ways To Specify The Same Style

H1 { font: italic bolder small-caps medium /150% Arial, sans-serif; }

H1 { font: bolder small-caps italic medium /150% Arial, sans-serif; }

• Not Recommended For New Work– Often Considered Less Readable

• May Be Encountered in Legacy Support



Hands On

• Verify That Various Combinations Conform to the Rules Provided– Use Several Browsers to Study Support Issues

introduction to css css fonts - fort collins, co copyright © xtr systems, llc cascading style...

Documents