Chapter 3: fonts and text,

Chapter 3: fonts and text,
I. font and text

Differences between fonts and texts:

• The font mainly involves the text size and appearance (can be applied to a single character ).

• Text mainly involves processing fonts (only applicable to text blocks)

Ii. Specify the font

The simplest way to specify a font in CSS is to use five common font sets.

• Serif: The font has small details (Time New Roman, Georgia, Palatino) at the end of the stroke)

• Sans-serif: the end has no details (Trebuchet MS, Arial, Verdana)

• Monospace: the width of each letter is equal (for example, I has the same width as m). It is usually used for typographical code blocks or imitating print effects.

• Cursive: handwriting, but it is more neat than handwriting (Comic Sans MS, Brush Script)

• Fantasy: cannot be classified into other types of fonts

/* Specify the generic font. the browser selects the default Helvetica or Arial * // * font-family as an inherited attribute, the value is passed to all descendant */body {font-family: sans-serif;}/* starts with a letter and ends with a general font */body {font-family: "hoefler text", times, serif ;}

3. Set the font size

Set the font size. Three types of values can be used:

• Absolute Value: pixels, inches
• Relative Value: percentage, em
• Keywords: x-small, small, large, xx-large

Advantages of relatively large and small fonts:

• All fonts can be scaled proportionally after the text size is larger or smaller.

• You only need to change the font size of the body Tag and change the text size proportionally.

Disadvantages of relatively large and small fonts

• The display of extremely small fonts may be caused by the inheritance of the font size.

• Users can easily "Destroy" the CSS page layout without considering the text scaling factor.

 

Body {font-family: verdana, arial, sans-serif;/* set the baseline size for the font. 1em is generally 16 pixels high */font-size: 1em;} h3 {/* h3's default size is 1.2em (19.2px), reset to 0.8em */font-size: 0.8em;}/* To ol and ul respectively, instead of setting the size for li to facilitate subsequent customization */ol {font-size :. 75em;} ul {font-size :. 75em;} a {font-size :. 7em;}/* specifies that child element a of ul inherits the attribute value from the parent element (If inherit is not used, the value of a will be 0.75 * 0.7em, cause too small */ul a {font-size: inherit ;}

Iv. Font attributes

Font-style	Defines whether the text is upright or skewed.	Italic, normal, oblique
Font-weight	Define text width	100, 200 ,... , 900, lighter, normal, bold, bolder
Font-variant	Convert to small uppercase letters	Small-caps, normal

 

/* Font-style has two functions: Make the font tilt, or make the tilted font upright */p {font-style: italic;} span {font-style: normal ;} /* bold hyperlink content */a {font-weight: bold;}/* convert the h3 title to a small uppercase letter */h3 {font-variant: small-caps ;}

5. Simplified font attributes

P {/* always ensure that the declared font-size and font-family values * // * specify the order: specify font-weight, font-style, font-variant (in any order), and then specify font-size, font-family */font: bold italic small-caps. 75em verdana, arial, sans-serif ;}

Vi. CSS snake text

CSS places a box around the text in the element, which is closed only at the beginning and end.

• Text-indent can only indent the first line

• To indent the entire section, use margin-left to push the entire container to the right.

VII. Text attributes

Text-indent	The first line of text in the indent Element	Any Length Value
Vertical-align	Move the text up or down relative to the baseline	Any length value, sup, sub, top, middle, bottom
Letter-spacing	Set Character Spacing	Any Length Value
Word-spacing	Set the padding	Any Length Value
Text-decoration	Add modifier to text	None, underline, overline, line-through, blink
Text-align	Align text with contained elements	Left, right, center, and justify
Line-height	Set the Row Height (the distance between the row and the row baseline)	Any numeric value (No unit required)
Text-transform	Change the text case in the element	Uppercase, lowercase, capitalize, none

 

/* Indent the first line of text */p {text-indent: 3em;}/* specifies a positive left margin greater than the negative indent value for the Section, produces the effect of hanging paragraphs */p {text-indent:-1.5em; margin-left: 2em; border: 1px solid red ;} /* set the Character spacing */p {letter-spacing :. 2em;}/* set the word spacing */p {word-spacing :. 2em;}/* remove the text underline */a {text-decoration: none;}/* set the text-align attribute on the contained element, align the sub-element content */div {text-align: right;}/* set the Row height */p {line-height: 1.5 ;} div # intro {/* The Row Height is set to 1.4 times the font height * // * The Row Height is higher than the text height, and the text is evenly distributed above and below */font: 1.2em/1.4;}/* converts the first letter of each word to uppercase */p {text-transform: capitalize;} p {vertical-align: 50%}