字体设置也是网页设计中的重要组成部分,合适的字体不仅会使页面更加美观,也可以提升用户体验。CSS 中提供了一系列用于设置文本字体样式的属性,比如更改字体,控制字体大小和粗细等等。
目录
8、 text-overflow:文本溢出包含元素时发生的事情
一、行高
1、行高(line height)
文字占有的实际高度
行高=上间距+文字的大小+下间距
默认情况下,上间距=下间距
line-height:
可选值
1、直接是一个大小 line-height:50px;
2、可以放一个倍数 line-height:2;
是当前字体的倍数
3、可以放一个百分比 是当前字体的百分比
2、单行文本在父元素中垂直居中
设置文本的高度跟父元素高度一致即可
3、font中也可以指定行高
语法:
font:字体的大小/行高 字体;
二、文本样式
font-family:设置字体;
font-style:设置字体的风格,例如倾斜、斜体等;
font-weight:设置字体粗细;
font-size:设置字体尺寸;
font-variant:将小写字母转换为小型大写字母;
font-stretch:对字体进行伸缩变形(使用较少,并且主流浏览器都不支持);
font:字体属性的缩写,可以在一个声明中设置多个字体属性。
1、text-transform 可以用来设置文本的大小写
可选值
nome默认值 文本正常显示
uppercase 文本大写
lowercas 文本小写
capitalize 单词首字母大写
text-transform:capitalize;
2、text-decoration 可以用来设置文本的修饰
可选值
nome 默认值 文本正常显示
underline 下划线
overline 上划线
line-through 删除线
text-decoration:line-through;
3、lerrer-spacing 可以指定字符间距
4、 word-spacing 可以设置单词之间的距离
letter-spacing: 20px;
word-spacing: 20px;
5、text-align 用于设置文本的对齐方式
可选值
left 文本向左 默认值
right 文本向右
justify 两端对齐
text-align: center
6、 text-indent 设置首行缩进
常用的 em单位
text-indent: 2em;
7、 white-space:; 设置网页如何处理空白
可选值 nowarp 不换行
8、 text-overflow:文本溢出包含元素时发生的事情
设置单行文本省略号的写法 :
先设置宽固定的宽度 :width: 300px;
设置不换行 :white-space:nowrap;
设置省略号:text-overflow: ellipsis;
裁剪多余的内容/溢出的内容:overflow: hidden;
9、 设置文本的阴影
text-shadow: h-shadow v-shadow bulr color;
参数:
第一个参数:阴影的水平位移距离 (必填)正值向右 负值向左
第二个参数:阴影的垂直位移距离 (必填) 正值向下 负值向下
第三个参数:阴影的模糊半径
第四个参数:阴影的颜色 (默认字体颜色)
h1{
color: red;
text-shadow:10px 30px 15px rgba(0, 0, 0, .5);
}
10、设置元素的阴影
box-shadow: h-shadow v-shadow bulr color;
参数:
第一个参数:阴影的水平位移距离 (必填)正值向右 负值向左
第二个参数:阴影的垂直位移距离 (必填) 正值向下 负值向下
第三个参数:阴影的模糊半径
第四个参数:阴影的颜色 (默认黑色)
三、图片三像素的问题
解决图片三像素的问题:
1、vertical-align:;非baseline默认值即可
2、将图片转成块元素(副作用:独占一行)
3、在父元素,将font-size设置0(副作用:父元素里面的所有的字都没有)
4、让元素脱离文档流,就不会再区分块元素,行内元素,行内块元素
(副作用:可能会让你的布局混乱)
四、如何设置元素水平垂直居中
vertical-align 设置元素垂直对齐的方式
设置图文对齐方式
可选值:baseline 基线对齐 默认值
top bottom middle