Session 3.2.. Objectives Setting the font family Setting the font size Working with Web fonts...
-
Upload
melody-fay -
Category
Documents
-
view
236 -
download
0
Transcript of Session 3.2.. Objectives Setting the font family Setting the font size Working with Web fonts...
Session 3.2.
ObjectivesSetting the font familySetting the font sizeWorking with Web fontsSetting font faces and sizesSetting font and text appearancesAligning text horizontallyAligning text vertically
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;
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%;
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
Working with Web FontsEach browser supports different fonts.Solution:
Web safe fonts Disadvantages
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
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');
}
Practice – Web Fonts1. For the h1 headings nested within the
section element, use the font list containing the CloisterBlack and fantasy fonts.
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;
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;
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.
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
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.
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;
Font Trends: Are You Trendy?
Aligning Text HorizontallySyntax:
text-align: alignment;With alignment being left, center, right, or
justifyExample:
text-align: center;
Aligning Text VerticallySyntax:
vertical-align: alignment;With alignment being baseline, bottom, middle,
sub, super, text-bottom, text-top, top
Example:vertical-align: top;
Practice – Aligning 1. Center the contents of figure boxes.2. Center the caption text within the figure
box.