1. 字体族
1.字体相关的样式
color:设置字体的颜色
font-size:字体的大小,em(相当于当前元素的font-size),rem(相当于根元素的font-size)
font-family:指定字体族的、字体格式,可选值:serif(衬线字体)--带小勾小边、sans-serif(非衬线字体)、monospace(等宽字体)--每个字母宽度一直的。
指定字体的类别,浏览器会自动使用该类别下的字体。
font-family可以同时指定多个字体,多个字体间使用逗号隔开,字体生效时优先使用第一个,第一个无法使用则使用第二个,依次类推,最后一个兜底。
@font-face可以直接将服务器中的字体提供给用户使用,里面包含两个值font-family(指定下载字体的名字)和src(服务器中字体的路径)。
使用font-face要注意两个问题:1.用户加载速度问题、影响服务器性能 2.版权问题,有些字体需要付费才能使用。
2 图标字体简介
icon-font
在网页中经常需要使用一些图标,我们可以通过图片来引入图标,但是图片大小本身会比较大,并且非常的不灵活。
所以在使用图标时,我们还可以将图标直接设置为字体,通过font-face的形式,来将字体进行引入,这样我们就可以通过字体的形式使用图标。
fontawesome 使用步骤:
- 下载 https://fontawesome.com/
- 解压
- 将css和webfonts移动到项目中
- 将all.css引入到网页中
- 使用图标字体:直接通过类名来使用图标字体,class=“fas fa-bell”, class=“fab fa-accessible-icon”。
3 图标字体的其他使用方式
通过伪元素设置图标字体
找到要设置图标的元素通过before或after选中
在content中设置字体的编码
设置字体的样式
fab: font-family: ‘Font Awesome 5 Brands’;
fas: font-family: ‘Font Awesome 5 Free’; font-weight: 900;
2.国内的话建议使用阿里字体库,但须注意版权问题。
- 加购物车。
- 加入项目。
- 图标管理-项目管理-下载
- 引入iconfont.css
- 使用(4种)
class=iconfont 指定码
指定class方式
通过伪元素
在线使用。
3 行高
定义
行高(line height)指的是文字占有的实际高度,如我们写在格子里写汉字(font-size实际的字体大小)
可以通过line-height来设置行高,行高可以指定一个大小(px、em),也可以直接为行高设置一个整数。如果是一个整数的话,那行高将会是字体指定的倍数,默认的行高是根据浏览器和字体来的。
字体框:就是字体存在的格子,设置font-size实际上就是在设置字体框的高度。行高会在字体框的上下平均分配。可以将行高设置为和高度一样的值,使单行文字在一个元素中垂直。行高还经常用来设置文字的行间距。
4 字体的简写属性
font
font可以设置字体相关的所有属性
语法:font : 字体大小 /行高 字体族 其中行高可以省略不写(是有一个默认值),如果不写会使用默认值
font-weight:
字重,字体的加粗效果 可选值:bold(加粗)、normal(一般体)、100-900(加粗的级别,一般电脑中不会设置这么多级别,所以没什么用处)
font-style:
字体的风格,可选值:normal(正常值)、italic(斜体)
5 文本的水平和垂直对齐
文本的水平对齐
text-align,可选值:left(左侧对齐)、right(靠右对齐)、center(居中对齐)、justify(两端对齐)
文本的垂直对齐
vertical-align:可选值:baseline(默认值) top(顶部边框对齐)middle(把子元素中线和x中线对齐),也可以直接指定对齐像素。
img的对齐
当图片基于vertical-baseline对齐的时候,会出现底下有点小空隙,这种情况下可以把baseline改成其他的值,比如:top botttom都可以。
6 其他的文样式
text-docoration
可选值:none(默认值)、underline(下划线)、line-through(删除线)、overline(上划线),比如去除超链接下划线。
white-space
设置网页如何处理空白
可选值:normal(正常),nowrap(不换行)、pre(保留空白)
配合:over-flow:hidden .txt-over-flow:ellisis (设置省略)
将一大串文字设置成一部分文字+省略号
width:200px
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; //文字溢出部分变成省略号