【九月打卡】第8天 前端工程师2022版 文本与字体属性第一讲

课程名称：前端工程师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-开头的

就近原则

在继承情况下，选择器权重计算失效，而是"就近原则"

课程收获：

谢谢老师，讲的非常细致，很容易懂。