目录
1、字体样式
字体大小 | font-size |
字体粗细 | font-weight |
字体样式 | font-style |
字体类型 | font-family |
字体类型 | font属性连写 |
1.1、字体大小
- 属性名:font-size
- 取值:数字+px
- 注意点:
- 谷歌浏览器默认字体大小是16px
- 单位需要设置,否则无效
1.2、字体粗细
- 属性名:font-weight
- 取值:
- 关键字
正常 normal 加粗 bold -
纯数字:100~900的整百数:
正常 400 加粗 700
- 关键字
-
注意点:
-
不是所有字体都提供了九种粗细,因此部分取值页面中无变化
-
实际开发中以:正常、加粗两种取值使用最多
-
1.3、文字样式(是否倾斜)
- 属性名:font-style
- 取值:
正常 normal 倾斜 italic
1.4、字体
- 属性名:font-family
- 常见字体系列(了解):
- 无衬线字体(sans-serif)
- 特点:文字壁画粗细均匀,并且首位无装饰
- 场景:网页中大多采用无衬线字体
- 常见该系列字体:黑体、Arial
- 等宽字体(monospace)
- 特点:每个字母或文字的宽度相等
- 场景:一般用于程序代码编写,有利于代码的阅读和编写
- 常见该系列字体:Consolas、fira code
- 衬线字体(serif)
- 特点:文字笔画粗细不均,并且首尾有笔锋装饰
- 场景:报刊书籍中应用广泛
- 常见该系列字体:宋体、Times New Roman
- 无衬线字体(sans-serif)
<style>
div {
/* font-family: 宋体; */
/* 如果用户电脑没有安装微软雅黑,就按黑体显示文字 */
/* 如果电脑没有安装黑体,就按任意一种非衬线字体系列显示 */
font-family: 微软雅黑,黑体,sans-serif;
}
</style>
1.5、层叠性
- 问题:
- 给同一个标签设置了相同的样式,此时浏览器会如何渲染?
- 结果:
- 如果给同一个标签设置了相同的属性,此时样式会叠层(覆盖),写在最下面的会生效
- TIP:
- CSS(Cascading style sheets)层叠样式表
- 所谓的层叠即叠加的意思,表示样式可以一层一层的层叠覆盖
1.6、字体font相关属性的连写
- 属性名:font(复合属性)
- 取值:
- font : style weight size family;
- 省略要求:
- 只能省略前两个,如果省略了相当于设置了默认值
- 注意点:如果需要同时设置单独和连写形式
- 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写的里面
2、文本样式
2.1、文本缩进
- 属性名:text-index
- 取值:
- 数字 + px
- 数字 + em (推荐:1em = 当前标签的font-size大小)
2.2、文本水平对齐方式
- 属性名:text-align
- 取值:
属性值 效果 left 左对齐 center 居中对齐 right 右对齐 -
注意点:
-
如果需要让文本水平居中,text-align属性给文本所在标签(文本的父元素)设置
-
-
水平居中方法总结:
-
text-align : center 可以让文本、span标签、a标签、input标签、img标签水平居中
-
注意点:如果需要让以上元素水平居中,text-align : center 需要给以上元素的父元素设置
-
2.3、文本修饰
- 属性名:text-decoration
- 取值:
属性值 效果 underline 下划线(常见) line-through 删除线(不常用) overline 上划线(几乎不用) none 无装饰线(常用) -
注意点:
-
开发中会使用text-decoration : none ; 清除a标签默认的下划线
-
3、行高
- 作用:控制一行的上下行间距
- 属性名:line-height
- 取值:
- 数字+px
- 倍数(当前标签font-size的倍数)
- 应用:
- 让单行文字垂直居中可以设置line-height:文字父元素高度
- 网页精准布局时,会设置line-height:1 可以取消上下间距
- 行高与font连写的注意点:
- 如果同时设置了行高与font连写,注意覆盖问题
- font : style weight size/line-height family ;