文章目录
字体样式属性大全
字体样式(font style)
font属性
是一个简写属性,把针对字体的属性设置在一个属性中,包括了:
- font-style
- font-variant
- font-weight
- font-size / line-height
- 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
用于规定元素的字体
可以设置多个值,如果一个不符合就尝试下一个值,每个值之间用逗号分隔
有两种类型的字体系列名称:
- 指定的系列名称:具体的名称,如’times’、‘courier’、‘arial’
- 通常字体系列名称:如’serif’、‘sans-serif’、‘cursive’、‘fantasy’、’ monospace ’
还有一种特殊的属性值就是inherit,表示从父元素继承字体样式
.text1{
font-family: 'Times New Roman', Georgia, Serif;
}
.text2{
font-family:Arial, Verdana, Sans-serif;
}
使用技巧
- 尽量使用偶数的数字字号
- 尽量使用系统默认字体
- 常用的中文字体有微软雅黑和宋体,英文字体又Arial
- 字体中包含空格、/、#、$等符号时,需要用单引号或双引号
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
用于定义字体颜色
取值方式有三种:
- 预定义的颜色,如red、green、blue等
- 十六进制,如#ff0000
- 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;
}