CSS Fonts - CSS(层叠样式表) | MDN (opens new window)
为文本添加样式(样式化文本) - 学习 Web 开发 | MDN (opens new window)
基本文本和字体样式 - 学习 Web 开发 | MDN (opens new window)
- 1 font-size: 字号(px/%)
- 2 font-family: 字体
- 3 font-style: 文字样式(normal/italic/oblique)
- 4 font-weight: 文字加粗(normal/bold/bolder/lighter/100-900)
- 5 line-height: 行高(px/数字/em等)
- 6 color: 文字的颜色(颜色的单词/rgb()->r:0-255,g:0-255,b-0-255/16进制(以#开头,后跟6位(#rrggbb)或3位(#rgb)16进制数)
- 7 text-decoration: 文字修饰(none/underline/overline/line-through)
- 8 text-align: 文本对齐方式(left/right/center)
- 9 text-transform: 字母大小写(capitalize/uppercase/lowercase/none)
- 10 text-indent: 文本缩进(px/em/%/pt等)
# font-size
font-size : 设置文本大小。
属性值
{number+px} :固定值尺寸像素 {number+%} :其百分比取值是基于父对象中字体的尺寸大小。
示例
p { font-size: 20px; }
p { font-size: 100%; }
# font-family
font-family : 设置文本字体。
属性值
name: 字体名称,按优先顺序排列,以逗号隔开。如果字体名称包含空格,则应使用引号括起。
示例:
p { font-family: Courier, "Courier New", monospace; }
# font-style
font-style : 设置文本字体的样式
属性值
- normal :默认值。正常的字体。
- italic :斜体。对于没有斜体变量的特殊字体,将应用 oblique。
- oblique :倾斜的字体。
p { font-style: normal; }
p { font-style: italic; }
p { font-style: oblique; }
# font-weight
font-weight : 设置文本字体的粗细
属性值
- normal :默认值,正常的字体。
- bold :粗体。
- bolder : 比 bold 粗。
- lighter : 比 normal 细。
- {100-900} :定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。
p { font-weight: normal; }
p { font-weight: bold; }
p { font-weight: 600; }
# color
color : 设置文本字体的颜色。
属性值
- name :颜色名称指定 color。
- rgb :指定颜色为RGB值。
- {颜色16进制} :指定颜色为16进制。
p { color: red; }
p { color: rgb(100,14,200); }
p { color: #345678; }
# line-height
line-height : 设置文本字体的行高。即字体最底端与字体内部顶端之间的距离。
属性值
- normal :默认值,默认行高。
- {number+px} :指定行高为长度像素。
- {number} : 指定行高为字体大小的倍数。
p { line-height: normal; }
p { line-height: 24px; }
p { line-height: 1.5; }
# text-decoration
text-decoration : 设置文本字体的修饰。
属性值
- normal :默认值,无修饰。
- underline :下划线。
- line-through : 贯穿线。
- overline : 上划线。
p { text-decoration: underline; }
p { text-decoration: line-through; }
p { text-decoration: overline; }
# text-align
text-align : 设置文本字体的对齐方式。
属性值
- left :默认值,左对齐。
- center :居中对齐。
- right : 右对齐。
p { text-align: left; }
p { text-align: center; }
p { text-align: right; }
# text-transform
text-transform : 设置文本字体的大小写
属性值
- none :默认值(无转换发生)。
- capitalize :将每个单词的第一个字母转换成大写。
- uppercase : 转换成大写。
- lowercase : 转换成小写。
p { text-transform: capitalize; }
p { text-transform: uppercase; }
p { text-transform: lowercase; }
# text-indent
text-indent : 设置文本字体的首行缩进。
属性值
- {number+px} :首行缩进number 像素。
- {number+em} :首行缩进number 字符。
p { text-indent: 24px; }
p { text-indent: 2em; }
# font 复合属性:
font: font-style font-variant font-weight font-size/line-height font-family;
注意:
- 1 属性值的位置顺序
- 2 除了font-size和font-family之外,其它任何一个属性值都可以省略
- 3 font-variant:normal/small-caps(让大写字母变得小一些)
p {
font: italic small-caps bolder 18px/1.5 宋体;
font: 18px 宋体;
}