The Book of CSS for Everyone read Chapter III: Fonts and text

First, font and text

The difference between a font and text:

• Fonts mainly involve the size and appearance of text (which can be applied to a single character).

• Text mainly involves the processing of fonts (applies only to blocks of text)

 second, the specified font

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

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

•  

/* specifies a generic font, and the browser chooses the default Helvetica or Arial */ /* Font-family is an inheritable property, and the value is passed to all descendants */  {font-family: sans-serif/** *body{  font-family: "Hoefler text", Times,serif;}

third, set the font size

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

• Absolute value: pixels, inches
• Relative value: percent, EM
• Sweatshirt size keywords: x-small, small, large, xx-large

 advantages of using relative size fonts: 

• After you select larger or smaller in the text size, all the fonts can be scaled proportionally

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

Disadvantages of using relative size fonts

• The display of very small fonts may result from the inheritance of font size

• Users can easily "destroy" CSS page layouts that do not take into account the text scaling factors

 

Body{font-family:Verdana,arial,sans-serif;/*The font is set to a reference size that can be adjusted, 1em is generally 16 pixels high*/font-size:1em;}H3{/*The default size of H3 is 1.2em (19.2px) and reset to 0.8em*/font-size:0.8em;}/*set size for OL and UL, respectively, instead of setting the size for Li, for easy follow-up customization*/ol{font-size:. 75em;}ul{font-size:. 75em;}a{font-size:. 7em;}/*Specifies that the sub-element a of UL inherits the property value from the parent element (if no inherit,a value is used, it becomes 0.75*0.7em, causing too small*/ul a{font-size:Inherit;}

Four, font properties 

font-style	< Span style= "font-family: ' Times New Roman ', Times;" > define text upright or italic	font-weight	100, 、...、 900, lighter, normal, bold , bolder
font-variant	Convert to small capital letters

 

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

v. Shorthand for font attributes

{/    * always ensure that the values of font-size and font-family are declared */    * Specify order: first 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 Serpentine text

css places a box around the text that is in the element and is closed only at the beginning and end.

• Text-indent can only indent the first line

• To indent an entire paragraph, you need to use Margin-left to push the entire container toward the right

 Seven, Text properties

Text-indent	Indent the first line of text in an element	Any length value
Vertical-align	Move text upward or downward relative to the baseline	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 adornments to Text	None, underline, overline, Line-through, Blink
Text-align	Aligning text to contained elements	Left, right, center, justify
Line-height	Set the row height (the distance between the row and line baseline)	Any numeric value (does not require a specified unit)
Text-transform	Change the case of text in an element	Uppercase, lowercase, capitalize, none

 

/*indent the first line of text*/P{text-indent:3em;}/*Specify a positive left margin for the paragraph that is greater than the negative indent value, resulting in the effect of hanging paragraphs*/P{text-indent:-1.5em;Margin-left:2em;Border:1px solid Red;}/*Set character spacing*/P{letter-spacing:. 2em;}/*Set Word spacing*/P{word-spacing:. 2em;}/*Remove the underline from the text*/a{text-decoration:None;}/*you need to set the Text-align property on the containing element to align its child element content*/Div{text-align: Right;}/*Set Row Height*/P{Line-height:1.5;}Div#intro{/*row height is set to 1.4 times times the font*/    /*The portion of the line height that is higher than the text is evenly distributed above and below the text*/Font:1.2em/1.4;}/*capitalize the first letter of each word*/P{Text-transform:Capitalize;}P{vertical-align:50%}

The Book of CSS for Everyone read Chapter III: Fonts and text