2. CSS 字体

2024-01-17 10:08 小编

2.1 font-size

font-size: 设置文本大小

· 属性值

· {number+px}:固定值尺寸像素

· {number+%}:其百分比取值是基于父对象中字体的尺寸大小

· 示例

· p { font-size: 20px; }p { font-size: 100%; }

2.2 font-family

font-family: 设置文本字体

· 属性值

· name: 字体名称 ,按优先顺序排列,以逗号隔开.如果字体名称包含空格,则应使用引号括起

· 示例

· p { font-family: Courier, "Courier New", monospace; }

2.3 font-style

font-style: 设置文本字体的样式

· 属性值

· normal:默认值.正常的字体

· italic:斜体.对于没有斜体变量的特殊字体,将应用 oblique

· oblique:倾斜的字体

· 示例

· p { font-style: normal; }p { font-style: italic; }p { font-style: oblique; }

2.4 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; }

2.5 color

color: 设置文本字体的颜色

· 属性值

· name:颜色名称指定 color

· rgb:指定颜色为RGB值

· {颜色16进制}:指定颜色为16进制

· 示例

· p { color: red; }p { color: rgb(100,14,200); }p { color: #345678; }

2.6 line-height

line-height: 设置文本字体的行高。即字体最底端与字体内部顶端之间的距离

· 属性值

· normal:默认值,默认行高

· {number+px}:指定行高为长度像素

· {number}: 指定行高为字体大小的倍数

· 示例

· p { line-height: normal; }p { line-height: 24px; }p { line-height: 1.5; }

2.7 text-decoration

text-decoration: 设置文本字体的修饰

· 属性值

· normal:默认值,无修饰

· underline:下划线

· line-through : 贯穿线

· overline : 上划线

· 示例

· p { text-decoration: underline; }p { text-decoration: line-through; }p { text-decoration: overline; }

2.8 text-align

text-align: 设置文本字体的对齐方式

· 属性值

· left:默认值,左对齐

· center:居中对齐

· right : 右对齐

· 示例

· p { text-align: left; }p { text-align: center; }p { text-align: right; }

2.9 text-transform

text-transform: 设置文本字体的大小写

· 属性值

· none:默认值(无转换发生)

· capitalize:将每个单词的第一个字母转换成大写.

· uppercase: 转换成大写

· lowercase: 转换成小写

· 示例

· p { text-transform: capitalize; }p { text-transform: uppercase; }p { text-transform: lowercase; }

2.10 text-indent

text-indent: 设置文本字体的首行缩进。

· 属性值

· {number+px}:首行缩进number 像素

· {number+em}:首行缩进number 字符

· 示例

· p { text-indent: 24px; }p { text-indent: 2em; }


在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码