session 3.2.. objectives setting the font family setting the font size working with web fonts...
TRANSCRIPT
![Page 1: Session 3.2.. Objectives Setting the font family Setting the font size Working with Web fonts Setting font faces and sizes Setting font and text appearances](https://reader030.vdocuments.site/reader030/viewer/2022032701/56649c995503460f94956710/html5/thumbnails/1.jpg)
Session 3.2.
![Page 2: Session 3.2.. Objectives Setting the font family Setting the font size Working with Web fonts Setting font faces and sizes Setting font and text appearances](https://reader030.vdocuments.site/reader030/viewer/2022032701/56649c995503460f94956710/html5/thumbnails/2.jpg)
ObjectivesSetting the font familySetting the font sizeWorking with Web fontsSetting font faces and sizesSetting font and text appearancesAligning text horizontallyAligning text vertically
![Page 3: Session 3.2.. Objectives Setting the font family Setting the font size Working with Web fonts Setting font faces and sizes Setting font and text appearances](https://reader030.vdocuments.site/reader030/viewer/2022032701/56649c995503460f94956710/html5/thumbnails/3.jpg)
Styling Web Page Text: Font FamilyWhat is a font family?Default font family on your browserSyntax:font-family: fonts;Where fonts is a font typeface or a list of font
typeface
Example:font-family: Arial Black, Georgia , Tahoma;
![Page 4: Session 3.2.. Objectives Setting the font family Setting the font size Working with Web fonts Setting font faces and sizes Setting font and text appearances](https://reader030.vdocuments.site/reader030/viewer/2022032701/56649c995503460f94956710/html5/thumbnails/4.jpg)
Styling Web Page Text: Font SizeSyntax:font-size: size;Font size unit of measurement:
Absolute units: mm, cm, in, pt, pc, px font-size: 12 pt;
Relative units: em, % font-size: 2em; font-size: 200%;
![Page 5: Session 3.2.. Objectives Setting the font family Setting the font size Working with Web fonts Setting font faces and sizes Setting font and text appearances](https://reader030.vdocuments.site/reader030/viewer/2022032701/56649c995503460f94956710/html5/thumbnails/5.jpg)
Practice – Font Family and Size1. In hs_styles.css, set the default font typeface to
Trebuchet MS, Helvetica, and sans-serif2. For the caption within the figure box, set the font
size to 14 pixels3. For the h1 headings nested within the section
element, set the font size to 2.5em4. For address elements nested within the footer
element, use fonts from the list Palatino Linotype, Book Antiqua, Palatino, and serif
![Page 6: Session 3.2.. Objectives Setting the font family Setting the font size Working with Web fonts Setting font faces and sizes Setting font and text appearances](https://reader030.vdocuments.site/reader030/viewer/2022032701/56649c995503460f94956710/html5/thumbnails/6.jpg)
Working with Web FontsEach browser supports different fonts.Solution:
Web safe fonts Disadvantages
![Page 7: Session 3.2.. Objectives Setting the font family Setting the font size Working with Web fonts Setting font faces and sizes Setting font and text appearances](https://reader030.vdocuments.site/reader030/viewer/2022032701/56649c995503460f94956710/html5/thumbnails/7.jpg)
Working with Web fontsWeb fonts
Specifications for downloadable fonts are used in the CSS
http://webfonts.fonts.com/ Still a challenge?Format Browser
TrueType/OpenType (.ttf) Chrome, Firefox, Opera, Safari
Embedded OpenType (.eot) Internet Explorer
Scalable Vector Graphics (.svg)
Chrome, Opera, Safari
Web Open Font Format (.woff)
Firefox, other browsers in development
![Page 8: Session 3.2.. Objectives Setting the font family Setting the font size Working with Web fonts Setting font faces and sizes Setting font and text appearances](https://reader030.vdocuments.site/reader030/viewer/2022032701/56649c995503460f94956710/html5/thumbnails/8.jpg)
Working with Web fontsInstalling a cross-browser Web font:@font-face {
font-family: ‘name';
src: url('eot');
src: local('☺'),
url(‘file.woff’) format (‘woff’),
url(‘file.ttf') format('truetype'),
url(‘file.svg') format('svg');
}
![Page 9: Session 3.2.. Objectives Setting the font family Setting the font size Working with Web fonts Setting font faces and sizes Setting font and text appearances](https://reader030.vdocuments.site/reader030/viewer/2022032701/56649c995503460f94956710/html5/thumbnails/9.jpg)
Practice – Web Fonts1. For the h1 headings nested within the
section element, use the font list containing the CloisterBlack and fantasy fonts.
![Page 10: Session 3.2.. Objectives Setting the font family Setting the font size Working with Web fonts Setting font faces and sizes Setting font and text appearances](https://reader030.vdocuments.site/reader030/viewer/2022032701/56649c995503460f94956710/html5/thumbnails/10.jpg)
Setting Font Faces and SizesTo set kerning (the space between letters), use
the following style property:letter-spacing: size;
To set tracking (the space between words), use the following style property:word-spacing: size;
To set leading (the space between lines of text), use the following style property:line-height: size;
![Page 11: Session 3.2.. Objectives Setting the font family Setting the font size Working with Web fonts Setting font faces and sizes Setting font and text appearances](https://reader030.vdocuments.site/reader030/viewer/2022032701/56649c995503460f94956710/html5/thumbnails/11.jpg)
Setting Font Faces and SizesTo set the indentation of the first line of a
block of text, use the following style property:text-indent: size;
![Page 12: Session 3.2.. Objectives Setting the font family Setting the font size Working with Web fonts Setting font faces and sizes Setting font and text appearances](https://reader030.vdocuments.site/reader030/viewer/2022032701/56649c995503460f94956710/html5/thumbnails/12.jpg)
Setting Font and Text AppearancesTo specify the font style, usefont-style: type;
where type is normal, italic, or oblique.To specify the font weight, usefont-weight: type;
where type is normal, bold, bolder, light, lighter, or a font weight value.
![Page 13: Session 3.2.. Objectives Setting the font family Setting the font size Working with Web fonts Setting font faces and sizes Setting font and text appearances](https://reader030.vdocuments.site/reader030/viewer/2022032701/56649c995503460f94956710/html5/thumbnails/13.jpg)
Setting Fonts and Text AppearancesTo specify a text decoration, usetext-decoration: type;
where type is none, underline, overline, or line-through.
To transform text, usetext-transform: type;
where type is capitalize, uppercase, lowercase, or none.
To display a font variant of text, usefont-variant: type;
where type is normal or small-caps
![Page 14: Session 3.2.. Objectives Setting the font family Setting the font size Working with Web fonts Setting font faces and sizes Setting font and text appearances](https://reader030.vdocuments.site/reader030/viewer/2022032701/56649c995503460f94956710/html5/thumbnails/14.jpg)
Practice – Font Faces and Sizes1. For unordered lists within the nav element,
set the the line height to 3.5em and indent the text 5 pixels.
2. For the caption within the figure box, display the text in italic.
![Page 15: Session 3.2.. Objectives Setting the font family Setting the font size Working with Web fonts Setting font faces and sizes Setting font and text appearances](https://reader030.vdocuments.site/reader030/viewer/2022032701/56649c995503460f94956710/html5/thumbnails/15.jpg)
Combining All Text Formatting in a Single StyleYou can combine most of the text and font styles
into a single property using the shortcut font property
font: font-style font-variant font-weight font-size/line-height font-family;
Example:
font: italic small-caps bold 2em/24px Helvetica, sans-serif;
![Page 16: Session 3.2.. Objectives Setting the font family Setting the font size Working with Web fonts Setting font faces and sizes Setting font and text appearances](https://reader030.vdocuments.site/reader030/viewer/2022032701/56649c995503460f94956710/html5/thumbnails/16.jpg)
Font Trends: Are You Trendy?
![Page 17: Session 3.2.. Objectives Setting the font family Setting the font size Working with Web fonts Setting font faces and sizes Setting font and text appearances](https://reader030.vdocuments.site/reader030/viewer/2022032701/56649c995503460f94956710/html5/thumbnails/17.jpg)
Aligning Text HorizontallySyntax:
text-align: alignment;With alignment being left, center, right, or
justifyExample:
text-align: center;
![Page 18: Session 3.2.. Objectives Setting the font family Setting the font size Working with Web fonts Setting font faces and sizes Setting font and text appearances](https://reader030.vdocuments.site/reader030/viewer/2022032701/56649c995503460f94956710/html5/thumbnails/18.jpg)
Aligning Text VerticallySyntax:
vertical-align: alignment;With alignment being baseline, bottom, middle,
sub, super, text-bottom, text-top, top
Example:vertical-align: top;
![Page 19: Session 3.2.. Objectives Setting the font family Setting the font size Working with Web fonts Setting font faces and sizes Setting font and text appearances](https://reader030.vdocuments.site/reader030/viewer/2022032701/56649c995503460f94956710/html5/thumbnails/19.jpg)
Practice – Aligning 1. Center the contents of figure boxes.2. Center the caption text within the figure
box.