CSS字体样式属性汇总

字体样式属性大全

字体样式(font style)

font属性

是一个简写属性，把针对字体的属性设置在一个属性中，包括了：

1. font-style
2. font-variant
3. font-weight
4. font-size / line-height
5. font-family

这5个属性必须按照顺序排列，可以不设置其中的某些值，但至少要指定字体大小(font-size)和字体系列(font-family)

.text1{
    font: italic arial, sans=serif
}
.text2{
    font: italic bold 12px/30px arial,sans-serif
}

font-style

用于定义字体的风格

值	描述
normal	默认值，浏览器显示一个标准的字体样式
italic	浏览器会显示一个斜体的字体样式
oblique	浏览器会显示一个倾斜的 字体样式
inherit	规定应该从父元素继承字体样式

.text1{font-style:normal}
.text2{font-style:italic}
.text3{font-style:oblique}

font-variant

font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小

值	描述
normal	默认值，浏览器会显示一个标准的字体
small-caps	浏览器会显示小型大写字母的字体
inherit	规定应该从父元素继承 font-variant 属性的值

.text{
    font-variant: small-caps;  //小写字母将会转变成大写字母
}

font-weight

用于设置文本的字体粗细

数字值 400 相当于 关键字 normal，700 等价于 bold。每个数字值对应的字体加粗必须至少与下一个最小数字一样细，而且至少与下一个最大数字一样粗

值	描述
normal	默认值，标准字符
bold	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
100~900	定义由粗到细的字符。400等同于normal，700等同于bold
inherit	规定应该从父元素继承字体的粗细

.text1{
    font-weight: normal;
}
.text2{
    font-weight:bold;
}
.text3{
    font-weight: 600;
}

font-size / line-height

设置字体的尺寸/字体大小

实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）。

各关键字对应的字体必须比一个最小关键字相应字体要高，并且要小于下一个最大关键字对应的字体

还可以设置为数值，单位有px、em、%、pt、cm等

值	描述
xx-small/x-small/small/medium/large/x-large/xx-large	medium为默认值
smaller	把font-size设置为比父元素更小的尺寸
larger	把font-size设置为比父元素更大的尺寸
length(一个数值)	把font-size设置为一个固定的值
%	把font-size设置为基于父元素的一个百分比值
inherit	规定应该从父元素继承字体尺寸

font-family

用于规定元素的字体

可以设置多个值，如果一个不符合就尝试下一个值，每个值之间用逗号分隔

有两种类型的字体系列名称：

1. 指定的系列名称：具体的名称，如’times’、‘courier’、‘arial’
2. 通常字体系列名称：如’serif’、‘sans-serif’、‘cursive’、‘fantasy’、’ monospace ’

还有一种特殊的属性值就是inherit，表示从父元素继承字体样式

.text1{
    font-family: 'Times New Roman', Georgia, Serif;
}
.text2{
    font-family:Arial, Verdana, Sans-serif;
}

使用技巧

1. 尽量使用偶数的数字字号
2. 尽量使用系统默认字体
3. 常用的中文字体有微软雅黑和宋体，英文字体又Arial
4. 字体中包含空格、/、#、$等符号时，需要用单引号或双引号

CSS Unicode字体样式—可用Unicode编码来替换字体样式，避免错误

字体名称	英文名称	Unicode编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼圆	YouYuan	\5E7C\5706
华文细黑	STXiHei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

.text{
    font-family: '\5B8B\4F53'
}

还有一种特殊的属性值就是inherit，表示从父元素继承字体样式

color

用于定义字体颜色

取值方式有三种：

1. 预定义的颜色，如red、green、blue等
2. 十六进制，如#ff0000
3. RGB代码，如rgb(255,0,0)、rgb(100%,0%,0%)、rgba(255,0,0,0.5)

.text1{
    color: red;
}
.text2{
    color: #f40;
}
.text3{
    color: rgb(255,0,0);
}

文本样式

text-indent—文本对齐方式

缩进文本：文本内容第一行缩进

值	描述
5em	缩进5em个单位，值可以是负值，变成悬挂缩进
20%	缩进父元素的百分比个宽度
inherit	继承父元素的属性

.text1{
    text-indent: -5em;
}

###　word-spacing—字体间隔

设置字体间隔，默认为0

值	描述
normal	默认值
length(一个数值)	定义字体间隔
inherit	从父元素继承的属性

.text1{
    word-spacing: 5em;  //5px等
}

text-transform—文本大小写

处理文本的大小写，共有四个值：none、uppercase、lowercase、capitalize

值	描述
none	默认值
capitalize	文本中的每个单词以大写字母开头
uppercase	文本中字母全部为大写
lowercase	文本中字母全部为小写
inherit	继承父元素的属性值

.text1{
    text-transform: uppercase;
}
.text2{
    text-transform: lowercase;
}

text-decoration—文本装饰

对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，父元素元素上设置的装饰会“延伸”到后代元素中

值	描述
none	默认值
underline	定义文本下划线
overline	文本上划线
line-through	文本中划线(相当于删除线)
blink	文本闪烁
inherit	继承父元素的属性值

.text1{
    text-decoration: underline;
}
.text2{
    text-decoration: blink;
}
.text3{
    text-decoration: overline underline;
}

white-space

定义如何处理文本中的空白符

值	描述	空白符	换行符	自动换行
pre-line	合并空白符序列，但是保留换行符	合并	保留	允许
normal	默认，空格会被浏览器忽略	合并	忽略	允许
norwrap	文本不会换行，文本会在在同一行上继续，直到遇到 标签为止	合并	忽略	不允许
pre	空白会被浏览器保留	保留	保留	不允许
pre-wrap	保留空白符序列，但是正常地进行换行	保留	保留	允许
inherit	继承父元素的属性值

.text1{
    white-space: norwrap;
}

text-align—文本对齐方式(水平对齐)

text-align 属性规定元素中的文本的水平对齐方式

值	描述
left	文本左对齐。默认值：由浏览器决定
right	文本右对齐
center	文本居中对齐
justify	文本两端对齐
inherit	继承父元素的属性值

.text{
    text-align: center;
}

vertical-align—文本垂直对齐

规定文本的垂直对齐方式，值包括：

inherit | top | bottom | text-top | text-bottom | baseline | middle | sub | super

.text{
 vertical-align: bottom;   
}

text-overflow—文本溢出属性

该属性用于定义当文本溢出时元素发生的操作，默认值为clip

值	描述
clip	修剪文本，超出则被裁剪
ellipsis	用省略号来代替被裁剪的文本
string	使用给定字符串来代替被裁剪的文本(Firefox有效)

.text1 {
    text-overflow: ellipsis;
}