1. Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Font Control Instructor: Joseph DiVerdi, Ph.D., MBA

2. Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Font Properties Several Different Properties Will Be Discussed –Font Families –Font Weight –Font Size –Font Style –Font Variations –Combined Font Property

3. Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC 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

4. Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC 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

5. Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC 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; }

6. Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC 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; }

7. Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Generic Font Families 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.

8. Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Generic Font Families 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.

9. Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Generic Font Families Monospace –Not Proportional Characters Each Have Same Width –May or Not Have Serif Emulate Old-fashioned Typewriters –Examples Courier, New Courier, Profont

10. Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Generic Font Families 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.

11. Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Generic Font Families Fantasy –Probably Proportional Characters Each Have Differing Widths –No Serif but Often Greater Decorations This Just Defies Description –Examples Klingon

12. Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC 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; }

13. Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Font Weight Controls the Weight or Heft of a Font font-weight: normal | bold | bolder | lighter | = 100, 200, 300,..., 900 Existing Bold Tag Is Easily Emulated: B { font-weight: bold; } All Features Are Very Well Supported

14. Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Font Size Controls the Size of a Font font-size: xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | | Either Absolute or Relative Values Are OK Relative Values Can Be Applied Repeatedly All Features Are Well Supported on Navigator Absolute Values Are Quirky on Explorer

15. Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Font Style Controls the Style of a Font font-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; }

16. Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Font Variant Provides a Variation of a Font font-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; }

17. Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC 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

18. Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Specified Using Font Font Is Shorthand for All Font Properties H1 { font: italic bolder small-caps medium /150% Arial, sans-serif; } Syntax Is Very Flexible –But a Bit Complicated...

19. Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Specified using Font H1 { font: [ || || ]? [ / ]? } –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

20. Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC 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

21. Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Hands On Verify That Various Combinations Conform to the Rules Provided –Use Several Browsers to Study Support Issues