+ All Categories
Home > Documents > Session 3.2.. Objectives Setting the font family Setting the font size Working with Web fonts...

Session 3.2.. Objectives Setting the font family Setting the font size Working with Web fonts...

Date post: 15-Dec-2015
Category:
Upload: melody-fay
View: 232 times
Download: 0 times
Share this document with a friend
Popular Tags:
19
Session 3.2.
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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Practice – Aligning 1. Center the contents of figure boxes.2. Center the caption text within the figure

box.


Recommended