"CSS Book for Everyone" Chapter 3: Fonts and Text_html/css_WEB-ITnose

1. Font and text

The difference between font and text:

Font mainly involves the size and appearance of text (can be applied to a single character) .

Text mainly involves the processing of fonts (can only be applied to text blocks)

2. Specify fonts

Specify fonts in CSS The simplest way is to use a collection of five common fonts

serif: This font has small details called serifs at the ends of character strokes (Time New Roman, Georgia, Palatino)

sans-serif: No details at the end (Trebuchet MS, Arial, Verdana)

monospace: Each letter has equal width (e.g. i and m have same width), usually used to typeset code blocks or imitate printing effects

cursive: handwritten notes, but neater than handwriting (Comic Sans MS, Brush Script)

fantasy: fonts that cannot be classified into other types

/*指定通用字体，浏览器会选择默认的Helvetica或者Arial*//*font-family是一个可继承的属性，值会传递给所有的后代*/body {font-family: sans-serif;} /*以首先字母为开头，以通用字体结束 */body{font-family: "hoefler text",times,serif;}

3. Set font size

To set the font size, you can use three types of values:

Absolute value: pixels, inches

Relative value: percentage, em

Sweatshirt size keywords: x-small, small, large, xx-large

Advantages of using relative size fonts:

Select larger or smaller in text size After that, all fonts scale proportionally

Just change the font size of the body tag and proportionally change the size of the text

Use relative size fonts Disadvantages

Possible display of extremely small fonts due to font size inheritance

Users can easily "break" CSS pages that do not take text scaling into account Layout

body{    font-family: verdana,arial,sans-serif;    /*为字体设置了可以调准的基准大小,1em一般为16像素高*/    font-size: 1em;} h3{    /*h3的默认大小为1.2em(19.2px)，重新设置为0.8em*/    font-size: 0.8em;} /*分别为ol和ul设置大小，而不是为li设置大小，方便后续自定义*/ol{font-size: .75em;}ul{font-size: .75em;} a {font-size: .7em;}/*规定ul的子元素a从父元素中继承属性值（如果没有使用inherit，a的值就会变成0.75*0.7em，导致过小*/ul a {font-size: inherit;}

4. Font attributes

font-style	定义文本的直立或倾斜	italic、normal、oblique
font-weight	定义文本的粗细	100、200、…、900、lighter、normal、bold、bolder
font-variant	转换成小型大写字母	small-caps、normal

/*font-style有两个作用：使字体倾斜，或者使倾斜的字体直立*/p {font-style: italic;}span {font-style: normal;} /*加粗超链接的内容*/a{font-weight: bold;} /*将h3标题转换为小型大写字母*/h3{font-variant: small-caps;}

5. Abbreviation of font attributes

p {    /*始终要保证声明font-size 和 font-family的值*/    /*指定顺序：先指定font-weight、font-style、font-variant（任意顺序），然后依次指定font-size、font-family*/    font:bold italic small-caps .75em verdana, arial, sans-serif;}

6. CSS snake text

CSS will place a box around the text located in the element, closed only at the beginning and end

text-indent can only indent the first line

To indent the entire paragraph, you need to use margin-left to push the entire container to the right

7. Text attributes

text-indent	缩进元素中文本的首行	任何长度值
vertical-align	相对于基准线将文本向上或者向下方移动	任何长度值、sup、sub、top、middle、bottom
letter-spacing	设置字符间距	任何长度值
word-spacing	设置字间距	任何长度值
text-decoration	向文本添加修饰	none、underline、overline、line-through、blink
text-align	使文本与包含元素对齐	left、right、center、justify
line-height	设置行高（行与行基准线之间的距离）	任何数字值（不需要指定单位）
text-transform	改变元素中文本的大小写形式	uppercase、lowercase、capitalize、none

text-indent

Indent the first line of text in the element

Any length value

/*缩进首行文本*/p {text-indent: 3em;} /*为段落指定一个大于负缩进值的正左外边距，产生悬挂段落的效果*/p {    text-indent: -1.5em;    margin-left: 2em;    border: 1px solid red;} /*设置字符间距*/p{    letter-spacing: .2em;} /*设置单词间距*/p{    word-spacing: .2em;} /*去掉文本的下划线*/a{    text-decoration: none;} /*需要在包含元素上设置text-align属性，使其子元素内容对齐*/div {    text-align: right;} /*设置行高*/p{    line-height: 1.5;}div#intro {    /*行高设置为字体的1.4倍*/    /*行高比文本高出的部分，会再文本的上方和下方平均分配*/    font:1.2em/1.4;} /*将每个单词的首字母变成大写*/p{    text-transform: capitalize;} p{    vertical-align: 50%}

vertical-align

Align text up or down relative to the baseline Move below

Any length value, sup, sub, top, middle, bottom

letter- spacing

Set character spacing

Any length value

word-spacing

Set word spacing

Any length value

text-decoration

Add decoration to text

none, underline, overline, line-through , blink

text-align

Align text with the containing element

left, right, center, justify

line-height

Set the row height (the distance between the row and the row baseline)

Any numeric value (no need to specify units)

text-transform

Change the case of text in an element

uppercase, lowercase, capitalize, none