【codecademy summary】html+css font

The default typeface for all HTML elements is TImes New Roman.

　　exmaple as use of font typeface:  font-family: "Courier New"; 

Two different typefaces of types as:

　　1.Serif - traditionally used in print designs, as they have been considered easier to read in long paragraphs of text. Like Times New Roman and Georgia.

　　2.sans serif - can look better and be easier to read. Like Arial and Helvetica.

When the stylesheer specifies a font not installed on user's computer, the pre-installed fonts can be used as fallback fonts for users.

　　exmaple as fallback fonts typeface as: font-family:Garamond, Times, serif;

Google offers Google Fonts, a firectory of thousands of open-source fonts that are free to use by anyone.To use a Google Font,you can use a <link>element in html file.

　　For exmaple, we use Raleway typeface:

　　<link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet" >

　　or use Playfair Display typeface:

　　<link href="https://fonts.googleapis.com/css?family=Playfair+Display" type="text/css" rel="stylesheet" >

 

To change the size of text on your web page, yoiu can use the font-size property.

　　for exmaple, we use that:

　　font-size :18px;

　　font-size: 1.3em;

　　font-size: 150%;

 

When text is styled to appear larger, the vertical spacing between lines of text can decrease so that creating text is difficult to read. To modify the spacing between lines of text with the line_height property:

　　for exmaple: line-height: 1.5em;

 

You can use the word-spacing to change the space between words in a body of text.

The default amount of space between words is usually 0.25em. 

　　for exmaple: word-spacing: 0.3em;

 

The kerning can be adjusted with the letter-spacing property in CSS.

Like words spacing,it's not common to increase the kerning in text, but sometimes it enhances the readability of uppercase text.

　　for exmaple: letter-spacing: 0.3em;

 

In CSS, the font-weight can property turns bold on or other style.

　　for exmaple: font-weight:bold;

　　also, we can add the index.html like that so we can use weight 100 to Robot font.It is possible to specify a different font weight, or even multiple within the same URL.Font weights can be set to 100 (thin), 200, 300, 400 (normal weight), 500, 600, 700, 800, or 900 (bold).100

　　<link href="https://fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet">

 

Italicize words with the font-style property as a normal value.

　　for exmaple: font-style: italic;

 

Text can also be styled to appear in either all uppercase or lowercase with the text-transform property.

　　for exmaple: text-transform: uppercase;

 

We can change font side for left or center or right by text-align property.

　　for exmaple: text-align: right;

 

转载于:https://www.cnblogs.com/guangluwutu/p/6387022.html