字体、图标字体、行高、文本样式(css)
字体相关的样式
color
用来设置字体颜色
font-family 可以同时指定多个字体,多个字体间使用时,隔开;字体生效时优先使用第一个,第一个无法使用则使用第二个,以此类推
/* font-foce 可以将服务器中的字体直接提供给用户去使用 问题:1.加载速度2.版权3.字体格式*/@font-face {/* 指定字体的名字 */ font-family: "myfont";/* 服务器中字体的路径 */ src: url("");}
图标字体(iconfont)
使用图标时,可以将图标设置为字体,通过 font-face 的形式来使用图标,然后通过使用字体的形式来使用图标font awesome
使用步骤
下载 font awesome(阿里的字体库)解压将 css 和 webfonts 移动到项目中将 all.css 引入到网页中使用图标字体
- 直接通过类名来使用图标字体
class= "fas fa-bell"
class ="fab fa-accessible-icon"
通过伪元素来设置图标字体
找到要设置图标的元素通过 before 或 after 选中在 content 中设置字体的编码设置字体的样式
-fab:
font-family: 'Font Awesome 5 Brands';
-fas
font-family: 'Font Awesome 5 Free';
font-weight: 900;
通过实体来使用图标字体
&#x图标的编码;
<span class="fas"></span>
行高(line height)
行高指的是文字占有的实际高度可以通过line-height
来设置 行高可以指定一个大小(px em)也可以直接为行高设置一个整数(如果是整数的话,行高将会是字体的指定的倍数) 行高经常还用来设置文字的行间距行间距 = 行高 - 字体大小;字体框
字体框就是字体存在的格子,设置font-size
实际上就是在设置字体框的高度行高会在字体框的上下平均分配
字体的简写属性
font 可以设置字体相关的所有属性;
font: bold italic 50px/2 微软雅黑, ‘Times New Roman', Times, serif;
语法: font:字体大小/行高 字体族;行高 可以省略不写,如果不写视为使用默认值
font-weight
自重 字体的加粗
normal
默认值 不加粗bold
加粗
font-style
字体的风格
normal
正常的italic
斜体
文本的样式
/* 单行省略号 */.box{width: 200px; white-space: nowrap; overflow: hidden;/* 显示不换行省略号 */ text-overflow: ellipsis;}