【CSS】字体文本

color 颜色
font-size 大小
font-family 字体
font-style 样式
font-weight 加粗
text-decoration 下划线
text-shadow 阴影
text-transform 大小写变换
text-indent 缩进
text-align 水平对齐、vertical-align垂直对齐
text-overflow 溢出
word-wrap 换行
word-break 截断
white-space 空白符
word-spacing 单词间隔、letter-spacing 字母间隔
line-height 行高
writing-mode 排布
iconfont 字体图标、font-family 字体引入

继承性：子级继承父级样式控制属性（子级拥有自己的样式则不会继承父级）；层叠性：相同的属性后面覆盖前面，不同的属性叠加；优先级：选择器优先级高的样式生效

color 颜色

<style>div{color: red; /* 命名颜色 */color: #48ff00; /* 十六进制 */color: rgb(6, 140, 250); /* RGB（红,绿,蓝）  取值范围 0-255 */color: rgba(252, 0, 197,0.8); /* RGB（红,绿,蓝,透明度）  透明度取值范围 0-1*/}
</style>
<div>颜色颜色颜色</div>

效果:
在这里插入图片描述

font-size 大小

默认为16px；可设置为 绝对大小，也可设置为 相对大小

<style>div{font-size: 30px;}div:nth-of-type(1) span{font-size: 40px;  /* px：绝对单位，不会随父元素字体大小改变 */}div:nth-of-type(2) span{font-size: 2em;  /* em：相对于父元素的字体大小的n倍 */}div:nth-of-type(3) span{font-size:200%;  /* %：相对于父元素的字体大小的%多少 */}div:nth-of-type(4) span{font-size:2rem;  /* rem：相对于根元素（即html元素）的字体大小（16px）的2倍 */}
</style>
<div>绝对<span>px</span>单位</div>
<div>相对<span>em</span>单位</div>
<div>相对<span>%</span>单位</div>
<div>相对<span>rem</span>单位</div>

效果:
在这里插入图片描述

font-family 字体

可同时指定多个字体，中间以逗号隔开；表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体；如果都没有，则以我们电脑默认的字体为准。若要给英文设置另一个字体，则英文字体需写在中文字体前面

<style>div:nth-of-type(1){font-family: "隶书";}div:nth-of-type(2){font-family: "SimSun","微软雅黑";}div:nth-of-type(3){font-family: "Times New Roman","SimSun","微软雅黑";}
</style>
<div>文字文字文字hello happy</div>
<div>文字文字文字hello happy</div>
<div>文字文字文字hello happy</div>

效果:
在这里插入图片描述

font-style 样式

<style>div:nth-of-type(1){font-style: normal; /* normal 默认正常文本 */}div:nth-of-type(2){font-style: italic; /* italic 斜体 */}div:nth-of-type(3){font-style: oblique; /* oblique 正常文本的倾斜显示 */}
</style>
<div>文字文字hello文字happy文字</div>
<div>文字文字hello文字happy文字</div>
<div>文字文字hello文字happy文字</div>

效果:
在这里插入图片描述

font-weight 加粗

关键字:normal默认，bold粗体；具体数值:100 200 300 400等同于normal 500 600 700等同于bold 800 900（有时候看不到粗细变化，是因为所使用的字体不支持。比如"微软雅黑"，只支持400和700这两种粗细；而Mac的"苹方"字体，支持100到900之间的各种粗细）；相对值:lighter更细，bolder更粗

<style>div:nth-of-type(1) span:nth-of-type(1){font-weight: bold;}div:nth-of-type(1) span:nth-of-type(2){font-weight: 900;}div:nth-of-type(2) span:nth-of-type(1){font-weight: lighter;}div:nth-of-type(2) span:nth-of-type(2){font-weight: bolder;}
</style>
<div><span>加粗</span> normal <span>900</span></div>
<div><span>更细</span> normal <span>更粗</span></div>

效果:
在这里插入图片描述

text-decoration 下划线

<style>div{margin: 10px;}div:nth-of-type(1){/* none：默认属性，没有装饰；underline：下划线；overline：上划线；line-through：中划线，有一条贯穿文本中间的修饰线 */text-decoration-line: underline;/* 颜色 */text-decoration-color: #0022ff;/* solid：实线；double：双实线；dotted：点划线；dashed：虚线；wavy：波浪线 */text-decoration-style: wavy;/* auto：由浏览器为文本装饰线选择合适的厚度；from-font：字体文件中包含的首选的厚度值；其它： em  px  % */text-decoration-thickness: 2px;}div:nth-of-type(2){/* 四个参数可以写在 text-decoration 的任意位置 */text-decoration: #00be16 6px dotted line-through;}div:nth-of-type(3){text-decoration: #ff2222 from-font dashed underline;}div:nth-of-type(4){text-decoration: #d122ff 2px double underline;}
</style>
<div>文字hello文字happy文字</div>
<div>文字hello文字happy文字</div>
<div>文字hello文字happy文字</div>
<div>文字hello文字happy文字</div>

效果:
在这里插入图片描述

text-shadow 阴影

<style>*{font-size: 30px;margin: 10px;}.one{/*h-shadow	必需的；水平偏移量；正数-向右偏移，负数-向左偏移。v-shadow	必需的；垂直偏移量；正数-向下偏移，负数-向上偏移blur-radius	 可选；模糊半径；数值越大越模糊；若不指定则无模糊效果。color	必需的；颜色；*/text-shadow: 3px 10px 2px red;}.more{/* 使用多个阴影效果时，用逗号隔开；后面的阴影会叠加在前面的阴影之上 */text-shadow: -3px -10px 2px red,-1px -16px 2px rgb(5, 173, 104),2px -20px 2px #ffb700,5px -24px 2px rgba(163, 7, 225,0.5);}.loukong{color: white;text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;}.jianbian{/* 线性渐变 */background: linear-gradient(to right,red,green 40%,orange 60%,plum 80%,blue);/* 控制背景的裁剪区域，决定背景在元素中的显示范围 */-webkit-background-clip: text;/* 文字的填充颜色  transparent透明，text-fill-color会覆盖color */-webkit-text-fill-color: transparent;/* 阴影 */text-shadow: 0 5px 20px #cdff88;}
</style>
<span class="one">文字文字</span>
<span  class="more">文字文字</span>
<span class="loukong">文字</span>
<p class="jianbian">文字文字文字文字文字文字</p>

效果:
在这里插入图片描述

text-transform 大小写变换

<style>/* none：默认不做任何处理 */p:nth-of-type(1){text-transform: capitalize; /* capitalize：单词的首字母大写，通过空格来识别单词 */}p:nth-of-type(2){text-transform: lowercase; /* lowercase：所有的字母都小写 */}p:nth-of-type(3){text-transform: uppercase; /* uppercase：所有的字母都大写 */}
</style>
<p>designers and developers</p>
<p>designers and developers</p>
<p>designers and developers</p>

效果:
在这里插入图片描述

text-indent 缩进

仅适用于块级元素，对行内元素无效

<style>p:nth-of-type(1){/* 可以设置为负值，但是会出现显示不全的问题，需要提前预留出位置（padding）即可 */text-indent: 70px;}p:nth-of-type(2){padding: 0 20px;text-indent: -20px;}p:nth-of-type(3){text-indent: 2em; /* 2em即两个中文的宽度 */}p:nth-of-type(4){text-indent: 30%; /* 相对于父元素宽度的百分比 */}
</style>
<p>文字文字文字hello文字文字happy文字文字我，是卖报的小行家捡到一分钱。文字文字happy文字文字我，是卖报的小行家捡到一分钱</p>
<p>文字文字文字hello文字文字happy文字文字我，是卖报的小行家捡到一分钱。文字文字happy文字文字我，是卖报的小行家捡到一分钱</p>
<p>文字文字文字hello文字文字happy文字文字我，是卖报的小行家捡到一分钱。文字文字happy文字文字我，是卖报的小行家捡到一分钱</p>
<p>文字文字文字hello文字文字happy文字文字我，是卖报的小行家捡到一分钱。文字文字happy文字文字我，是卖报的小行家捡到一分钱</p>

效果:
在这里插入图片描述

text-align 水平对齐、vertical-align垂直对齐

<style>p{border: 1px solid red;}p:nth-of-type(1){text-align: center; /* left:默认值；right：右对齐；center：居中对齐 */}p:nth-of-type(2) span{/* 不同大小的文字的垂直对齐，使用vertical-align（top默认 middle  bottom  baseline基线）*/vertical-align: middle;}
</style>
<p>文字文字文字</p>
<p><span style="font-size: 25px;">Second</span><span style="font-size: 16px;">First</span>
</p>

效果:
在这里插入图片描述

text-overflow 溢出

<style>/*clip：不显示溢出文本     ellipsis：用省略标记"..."溢出文本需要与 overflow: hidden;和 white-space: nowrap;一起使用    若依旧不生效常见于容器被设置了display: flex;*/ul{list-style: none;margin: 20px 0;padding: 0;border: 1px solid #727272;width: 200px;}li{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}table{width: 200px;/* 但是在 table 中不起作用，百度说要想起作用需给 table元素设定 table-layout: fixed 单元格固定 */table-layout: fixed;}td{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
</style>
<ul><li>骄傲了单精度第四集外拉倒大垃圾袋</li><li>骄傲了单精度第四集外拉倒大垃圾袋</li>
</ul>
<table border="1"><tr><td>骄傲大垃圾袋大大垃圾袋垃圾袋</td><td>骄傲了大垃圾袋骄傲大垃圾了单</td></tr>
</table>

效果:
在这里插入图片描述

word-wrap 换行

<style>/*normal：（浏览器默认处理）仅仅在同意的断字点换行break-word：允许在长单词或URL地址内部进行换行；即在容器末端有长单词不能完全显示时，不会截断单词，而是作为整体自动换行*/div{width: 200px;height: 120px;border: 1px solid red;}#div2{overflow-wrap: break-word;word-wrap: break-word;/* CSS3中将 word-warp 改名为 overflow-wrap，同时使用提高兼容性 */}
</style>
<div id="div1">Lorem ipsum dolor sit amet, ipsum amet-consectetur elit. https://blog.csdn.net/wei_xin_30667649
</div>
<div id="div2">Lorem ipsum dolor sit amet, ipsum amet-consectetur elit. https://blog.csdn.net/wei_xin_30667649
</div>

效果:
在这里插入图片描述

word-break 截断

<style>div{width: 200px;height: 80px;border: 1px solid red;}#div2{/*keep-all：默认，不允许在单词内换行，仅能在半角空格或连字符"-"处换行break-all：在单词内换行，即在容器末端有长单词不能全然显示，会截断单词（弥补了 word-wrap:break-word 对于长串英文不起作用的缺陷）*/word-break: break-all;}
</style>
<div id="div1">Lorem ipsum dolor sit amet, ipsum amet-consectetur elit
</div>
<div id="div2">Lorem ipsum dolor sit amet, ipsum amet-consectetur elit
</div>

效果:
在这里插入图片描述

white-space 空白符

<style>div{width: 200px;height: 100px;border: 1px solid red;}#div2{/*空白字符包括空格，制表符等normal：合并空格（换行符转化为一个空格），换行nowrap：合并空格（换行符转化为一个空格），不换行pre-wrap：保留空格、换行符，换行pre：保留空格、换行符，不换行pre-line：合并空格，保留换行符，换行*/white-space: pre-wrap;}
</style>
<div id="div1">Lorem ipsum dolor sit amet, ipsum amet-consectetur elit
</div>
<div id="div2">Lorem ipsum dolor sit amet, ipsum amet-consectetur elit
</div>

效果:
在这里插入图片描述

word-spacing 单词间隔、letter-spacing 字母间隔

<p style="letter-spacing: 2em">Hello Word 你好，世界！</p><p style="word-spacing: 2em">Hello Word 你好，世 界！</p> <!-- 仅仅作用于空格隔开的单词、字-->

效果:
在这里插入图片描述

line-height 行高

<style>p{border: 1px solid red;height: 40px;/* 让单行文本垂直居中，设置 line-height 与文字父元素的高度相同 */line-height: 40px;/* 行高：行与行之间的基线到基线的距离 */}
</style>
<p>First</p>
<p>Second</p>

效果:
在这里插入图片描述

writing-mode 排布

<style>p{width: 150px;height: 150px;border: 1px solid red;margin: 0px;float: left;}/* 定义了文本水平或垂直排布以及在块元素中文本的行进方向，不是所有的浏览器都兼容 */p:nth-of-type(1){writing-mode: vertical-rl;}p:nth-of-type(2){writing-mode: vertical-lr;}p:nth-of-type(3){writing-mode: horizontal-tb;}
</style>
<p>海上生明月，天涯共此时。情人怨遥夜，竟夕起相思。</p>
<p>灭烛怜光满，披衣觉露滋。不堪盈手赠，还寝梦佳期。</p>
<p>灭烛怜光满，披衣觉露滋。不堪盈手赠，还寝梦佳期。</p>

效果:
在这里插入图片描述

iconfont 字体图标、font-family 字体引入

<!-- font-class引用方式 1：引入项目下面生成的 fontclass 代码 -->
<link rel="stylesheet" href="./day5/font/iconfont.css"><style>/* font-class引用方式 3：可以单独修改某一个的样式*/.icon-img_home_tag_classify_1_bg_color{color: red;font-size: 100px;}/* Symbol引入方式 2：加入通用 CSS 代码（引入一次就行） */.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}/* Symbol引入方式 4：可以单独修改某一个的样式 */.dd{width: 100px;height: 100px;}/* 使用 @font-face规则来定义字体名称和字体文件路径 */@font-face {font-family: "阿里妈妈刀隶体"; /* 自定义字体名称 */src: url("./day5/阿里妈妈刀隶体/AlimamaDaoLiTi.ttf") format("truetype"), /* 字体文件的路径 */url("./day5/阿里妈妈刀隶体/AlimamaDaoLiTi.woff") format("woff");url("./day5/阿里妈妈刀隶体/AlimamaDaoLiTi.woff2") format("woff2"); /* 为了提高兼容性，可提供多种格式的字体文件 */}p {font-family: "阿里妈妈刀隶体", "fangsong"; /* fangsong是备用字体 */font-size: 50px;}
</style><!-- font-class引用方式 2：挑选相应图标并获取类名，应用于页面 -->
<span class="iconfont icon-img_home_tag_classify_1_bg_color"></span><!-- Symbol引入方式 3：挑选相应图标并获取类名，应用于页面（浏览器渲染 SVG 的性能一般，还不如 png） -->
<svg class="icon dd" aria-hidden="true"><use xlink:href="#icon-pencil-01"></use>
</svg><!-- Symbol引入方式 1：引入项目下面生成的 symbol 代码 -->
<script src="./day5/font/iconfont.js"></script><!-- 使用 @font-face规则中的外部下载的字体 -->
<p>中秋节快乐</p>