CSS的字体文本样式
一.字体样式
1.font-size
修改文本的字体大小(没啥可说哒^ . ^)
可选择的 xx-small x-small small medium large x-large xx-large
注意:chrome最小的字体为12px 如果你设置的字体小于12px那么字体默认为12px(最小字体可以通过谷歌浏览器自己的设置来改变最小字体为6px)
可选择的 smaller larger 设置相对的字体大小(相对于父元素)
2.font-variant
设置字母是否以小型大写字母显示
可选择的 normal small-caps
3.font-style
可选择的 normal italic oblique
italic 表示使用斜体 即电脑使用的语言包中有斜体
如果语言包中的字体没有斜体 那么可以使用oblique让文字倾斜
4.font-weight
设置字体的粗细
可选择的 normal lighter bold bolder 100~900的数字(600以后是加粗,600以前不加粗)
5.font-family
设置使用的字体(微软雅黑0.0嘿嘿嘿)
如何设置备用字体(只针对中国的哦)
font-family:微软雅黑,楷体,宋体
6.font
字体设置的简写形式
font:[是否倾斜|是否加粗|是否使用小型大写]字体大小 字体名称
特别篇
web字体
如果想要用户使用某种字体可以到服务端下载
@font-face{
font-family:"myfont";
src:url("calibri.ttf");
}
二.文本样式
1.text-decoration
给文本增加各种线
可选择的 underline overline line-through blink(基本不被支持了)
2.text-transform
转换大小写
可选择的 uppercase lowercase capitalize
3.text-shadow
给文字添加阴影
如果不设置阴影颜色 那么阴影颜色则和字体的颜色一致
text-shadow:水平偏移 垂直偏移[模糊半径|阴影颜色],另一个阴影...
text-shadow通过组合多个阴影可以做出许多不同的效果 比如辉光 浮雕等等
三.文本控制
1.text-align
设置文本的对齐方式
可选择的 left right center justify start end (最后两个ie opera 貌似不支持)
2.white-space
设置空白排版方式
可选择的 normal 空白符被压缩文本自动换行 nowrap空白符被压缩文本不自动换行
pre 空白符被保留遇到换行符换行 pre-line 空白符被压缩 文本遇到换行符换行或排满换行
pre-wrap 空白符被保留 文本遇到换行符换行或排满换行
3.letter-spacing
设置文本文字之间的间距
4.word-spacing
设置英文单词之间的间距(对中文无效果)
5.line-height
设置行高
6.word-wrap
让过长的英文单词断开
可选择的 normal break-word
7.text-indent
设置文本的首行缩进
一.字体样式
1.font-size
修改文本的字体大小(没啥可说哒^ . ^)
可选择的 xx-small x-small small medium large x-large xx-large
注意:chrome最小的字体为12px 如果你设置的字体小于12px那么字体默认为12px(最小字体可以通过谷歌浏览器自己的设置来改变最小字体为6px)
可选择的 smaller larger 设置相对的字体大小(相对于父元素)
2.font-variant
设置字母是否以小型大写字母显示
可选择的 normal small-caps
3.font-style
可选择的 normal italic oblique
italic 表示使用斜体 即电脑使用的语言包中有斜体
如果语言包中的字体没有斜体 那么可以使用oblique让文字倾斜
4.font-weight
设置字体的粗细
可选择的 normal lighter bold bolder 100~900的数字(600以后是加粗,600以前不加粗)
5.font-family
设置使用的字体(微软雅黑0.0嘿嘿嘿)
如何设置备用字体(只针对中国的哦)
font-family:微软雅黑,楷体,宋体
6.font
字体设置的简写形式
font:[是否倾斜|是否加粗|是否使用小型大写]字体大小 字体名称
特别篇
web字体
如果想要用户使用某种字体可以到服务端下载
@font-face{
font-family:"myfont";
src:url("calibri.ttf");
}
二.文本样式
1.text-decoration
给文本增加各种线
可选择的 underline overline line-through blink(基本不被支持了)
2.text-transform
转换大小写
可选择的 uppercase lowercase capitalize
3.text-shadow
给文字添加阴影
如果不设置阴影颜色 那么阴影颜色则和字体的颜色一致
text-shadow:水平偏移 垂直偏移[模糊半径|阴影颜色],另一个阴影...
text-shadow通过组合多个阴影可以做出许多不同的效果 比如辉光 浮雕等等
三.文本控制
1.text-align
设置文本的对齐方式
可选择的 left right center justify start end (最后两个ie opera 貌似不支持)
2.white-space
设置空白排版方式
可选择的 normal 空白符被压缩文本自动换行 nowrap空白符被压缩文本不自动换行
pre 空白符被保留遇到换行符换行 pre-line 空白符被压缩 文本遇到换行符换行或排满换行
pre-wrap 空白符被保留 文本遇到换行符换行或排满换行
3.letter-spacing
设置文本文字之间的间距
4.word-spacing
设置英文单词之间的间距(对中文无效果)
5.line-height
设置行高
6.word-wrap
让过长的英文单词断开
可选择的 normal break-word
7.text-indent
设置文本的首行缩进