课程名称：前端工程师2022版
课程章节：文本与字体属性
课程讲师： elex
课程内容：
1.文字属性：
{
常用文本样式属性
color属性 可设置文本内容的前景色
color:#ff0000;黑色#000,白色#fff,灰色有#ccc,#333,#2f2f2f
rgb表示法
color:rgb(255,0,0);
rgba表示法，最后一个参数表示透明度
color:rgba(255,0,0,.65);
rgba从IE9开始兼容
font-size属性 用来设置字号，单位通常为px
font-size:30px;
网页正文通常16px，浏览器最小支持10px
font-weight属性 设置字体的粗细程度，通常就normal和bold两个值
normal 正常粗细
bold 加粗
font-style属性 设置字体倾斜
normal 取消倾斜
italic 倾斜字体
oblique 倾斜字体
text-decoration
none 没有修饰线
underline 下划线
line-through 删除线
}
字体属性：{
font-family 设置字体
font-family: serif, "Times New Roman", "微软雅黑";
字体可以是列表的形式，用逗号区分，后面的字体是前面字体的备用字体
字体名称中有空格与中文书写的字体，需要用引号包裹
一般英文字体放前面，以防中文字体中的英文字体覆盖英文字体
字体通常用用户计算机中已经安装好的字体
若自定义字体则需要引入字体文件，格式有 eot woff2 woff ttf svg
一般只将需要的文字创建新字体，以缩小文件大小
使用 @font-face 定义新字体
@font-face {
font-family: '字体名称';
font-display: swap;
src: url('字体文件地址.eot');
/* IE9*/
src: url('字体文件地址.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('字体文件地址.woff2') format('woff2'),
url('字体文件地址.woff') format('woff'),
/* chrome、firefox */
url('字体文件地址.ttf') format('truetype'),
/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('字体文件地址.svg#字体类型') format('svg');
/* iOS 4.1- */
}
注意：引号嵌套要用单双相间的方式，"111'22"3"22'111"
阿里巴巴普惠体
网址：https://www.iconfont.cn/webfont
}
段落属性{
text-indent:2em; 首行缩进2个字符
/* 单词间隔 */
word-spacing: 10px;
line-height:1.5;定义行高
可以以px为单位的数值
可以是没有单位的数值，表示字号的倍数（最推荐）
可以是百分数，表示字号的倍数，150%
如果想让单行文本垂直居中，设置行高=盒子高度
text-align:center，即可实现文本水平居中
div{
width: 500px;
height: 200px;
border: 1px solid #000;
/* 垂直居中行高等于盒子高 */
text-align: center;
line-height: 200px;
}
font合写属性
font-style,font-weight,font-size,line-height,font-family
font:20px/1.5 Arial,"微软雅黑"
字号20px 行高1.5倍 字体
font:italic bold 20px/1.5 Arial,"微软雅黑"
font: bold italic 40px/1.5 "Time New Roman","宋体"
倾斜 加粗 字号/行高 字体 顺序不能换*/
英文字体写着前面中文字体写在后面
}
继承性{
继承性
以下标签具有继承性
color
font-开头的
list-开头的
text-开头的
line-开头的
就近原则
在继承情况下，选择器权重计算失效，而是"就近原则"
课程收获：
谢谢老师，讲的非常细致，很容易懂。
随时随地看视频
