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)
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;}To set the font size, you can use three types of values:
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;}| 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;}
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;}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
| 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%}Copy after login | ||||||||||||||||||||||||
| 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 |
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
