Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style...
-
Upload
solomon-lindsey -
Category
Documents
-
view
221 -
download
0
Transcript of Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style...
![Page 1: Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Font Control Instructor: Joseph DiVerdi, Ph.D.,](https://reader035.fdocuments.in/reader035/viewer/2022062518/56649ec45503460f94bcf192/html5/thumbnails/1.jpg)
Introduction to CSSCSS Fonts - Fort Collins, CO
Copyright © XTR Systems, LLC
CascadingStyle Sheets -Font Control
Instructor: Joseph DiVerdi, Ph.D., MBA
![Page 2: Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Font Control Instructor: Joseph DiVerdi, Ph.D.,](https://reader035.fdocuments.in/reader035/viewer/2022062518/56649ec45503460f94bcf192/html5/thumbnails/2.jpg)
Introduction to CSSCSS 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
![Page 3: Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Font Control Instructor: Joseph DiVerdi, Ph.D.,](https://reader035.fdocuments.in/reader035/viewer/2022062518/56649ec45503460f94bcf192/html5/thumbnails/3.jpg)
Introduction to CSSCSS 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
![Page 4: Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Font Control Instructor: Joseph DiVerdi, Ph.D.,](https://reader035.fdocuments.in/reader035/viewer/2022062518/56649ec45503460f94bcf192/html5/thumbnails/4.jpg)
Introduction to CSSCSS 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
![Page 5: Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Font Control Instructor: Joseph DiVerdi, Ph.D.,](https://reader035.fdocuments.in/reader035/viewer/2022062518/56649ec45503460f94bcf192/html5/thumbnails/5.jpg)
Introduction to CSSCSS 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;
}
![Page 6: Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Font Control Instructor: Joseph DiVerdi, Ph.D.,](https://reader035.fdocuments.in/reader035/viewer/2022062518/56649ec45503460f94bcf192/html5/thumbnails/6.jpg)
Introduction to CSSCSS 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; }
![Page 7: Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Font Control Instructor: Joseph DiVerdi, Ph.D.,](https://reader035.fdocuments.in/reader035/viewer/2022062518/56649ec45503460f94bcf192/html5/thumbnails/7.jpg)
Introduction to CSSCSS 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.
![Page 8: Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Font Control Instructor: Joseph DiVerdi, Ph.D.,](https://reader035.fdocuments.in/reader035/viewer/2022062518/56649ec45503460f94bcf192/html5/thumbnails/8.jpg)
Introduction to CSSCSS 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.
![Page 9: Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Font Control Instructor: Joseph DiVerdi, Ph.D.,](https://reader035.fdocuments.in/reader035/viewer/2022062518/56649ec45503460f94bcf192/html5/thumbnails/9.jpg)
Introduction to CSSCSS 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
![Page 10: Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Font Control Instructor: Joseph DiVerdi, Ph.D.,](https://reader035.fdocuments.in/reader035/viewer/2022062518/56649ec45503460f94bcf192/html5/thumbnails/10.jpg)
Introduction to CSSCSS 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.
![Page 11: Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Font Control Instructor: Joseph DiVerdi, Ph.D.,](https://reader035.fdocuments.in/reader035/viewer/2022062518/56649ec45503460f94bcf192/html5/thumbnails/11.jpg)
Introduction to CSSCSS 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
![Page 12: Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Font Control Instructor: Joseph DiVerdi, Ph.D.,](https://reader035.fdocuments.in/reader035/viewer/2022062518/56649ec45503460f94bcf192/html5/thumbnails/12.jpg)
Introduction to CSSCSS 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; }
![Page 13: Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Font Control Instructor: Joseph DiVerdi, Ph.D.,](https://reader035.fdocuments.in/reader035/viewer/2022062518/56649ec45503460f94bcf192/html5/thumbnails/13.jpg)
Introduction to CSSCSS Fonts - Fort Collins, CO
Copyright © XTR Systems, LLC
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
![Page 14: Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Font Control Instructor: Joseph DiVerdi, Ph.D.,](https://reader035.fdocuments.in/reader035/viewer/2022062518/56649ec45503460f94bcf192/html5/thumbnails/14.jpg)
Introduction to CSSCSS Fonts - Fort Collins, CO
Copyright © XTR Systems, LLC
Font Size
• Controls the Size of a Fontfont-size: xx-small | x-small | small | medium | large |
x-large | xx-large | smaller | larger |
<length> | <number>
• 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
![Page 15: Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Font Control Instructor: Joseph DiVerdi, Ph.D.,](https://reader035.fdocuments.in/reader035/viewer/2022062518/56649ec45503460f94bcf192/html5/thumbnails/15.jpg)
Introduction to CSSCSS Fonts - Fort Collins, CO
Copyright © XTR Systems, LLC
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; }
![Page 16: Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Font Control Instructor: Joseph DiVerdi, Ph.D.,](https://reader035.fdocuments.in/reader035/viewer/2022062518/56649ec45503460f94bcf192/html5/thumbnails/16.jpg)
Introduction to CSSCSS Fonts - Fort Collins, CO
Copyright © XTR Systems, LLC
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; }
![Page 17: Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Font Control Instructor: Joseph DiVerdi, Ph.D.,](https://reader035.fdocuments.in/reader035/viewer/2022062518/56649ec45503460f94bcf192/html5/thumbnails/17.jpg)
Introduction to CSSCSS 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
![Page 18: Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Font Control Instructor: Joseph DiVerdi, Ph.D.,](https://reader035.fdocuments.in/reader035/viewer/2022062518/56649ec45503460f94bcf192/html5/thumbnails/18.jpg)
Introduction to CSSCSS Fonts - Fort Collins, CO
Copyright © XTR Systems, LLC
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...
![Page 19: Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Font Control Instructor: Joseph DiVerdi, Ph.D.,](https://reader035.fdocuments.in/reader035/viewer/2022062518/56649ec45503460f94bcf192/html5/thumbnails/19.jpg)
Introduction to CSSCSS Fonts - Fort Collins, CO
Copyright © XTR Systems, LLC
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
![Page 20: Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Font Control Instructor: Joseph DiVerdi, Ph.D.,](https://reader035.fdocuments.in/reader035/viewer/2022062518/56649ec45503460f94bcf192/html5/thumbnails/20.jpg)
Introduction to CSSCSS 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
![Page 21: Introduction to CSS CSS Fonts - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Font Control Instructor: Joseph DiVerdi, Ph.D.,](https://reader035.fdocuments.in/reader035/viewer/2022062518/56649ec45503460f94bcf192/html5/thumbnails/21.jpg)
Introduction to CSSCSS 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