2020-0331图标字体

字体

Color是前景色，除了文字还包括边框

em

• 跟字体大小有关，1em等于当前元素的字体大小，会根据当前文字大小去改变，也就是1个font-size，没设置的时候也会继承字体大小，em会用于和字体相关的样式，简单来说1em就等于一个字的大小
  • image.png

rem

• rem跟em类似，r表示root
• 1rem等于根元素的一个font-size，参照物是HTML根元素
• font-size，用来指定字体大小
• font-family用来指定使用的字体

字体分类

• 以下几种并不是一个具体的字体，而是一类字体

• Serif

  • 衬陷字体，表示不好好写字

    
    
    image.png

• sans-serif

  • 非衬陷字体，横平竖直的

    
    
    image.png

• Monospace

  • 等宽字体，每个字都是等宽的

当我们使用字体分类，浏览器会自动选择具体字体使用，不同的浏览器可能不一样

如果我们设置的字体用户字体库里没有，浏览器会使用默认字体，所以使用字体时通常不使用奇怪的字体，因为用户电脑里不一定有，最常用的就是微软雅黑

用英文字体名安全些，font-family：’’microsoft yahei’’，如果使用的字体名中间有空格时，可以使用引号

font-family，用来指定字体族,该样式可以同时制定多个字体

• 这是系统提示的字体，系统会按照顺序使用，支持哪个用哪个

• image.png

• 一般最后一个字体都是sans-serif或serif

  
  
  image.png

font简写属性

可以设置所有字体相关样式

• 书写语法

  • 字体族必须是最后一个属性

  • 字体大小必须是倒数第二个

  • 这两个属性必须写

  • 其他属性写不写，顺序都无所谓
    语法
    font：50px 'Microsoft yahei'， arial，helvetica，sans-serif;

  • font：字体大小 字体族

  • 这个属性一般都是设置在body元素上，好处就是所有的元素都继承这个样式

行高

• 文字在显示时是存在行框的
  • 这个行框看不见，但是却真实存在
    • image.png
• 这是一个行高
  
  image.png
  
  文字默认会在行高当中垂直居中
  
  image.png

如果希望一段文字在父元素中垂直居中，可以将行高设置为和父元素高度一样的值（height=line-height）
这种居中只适用于单行文字
行高也可以设置为一个整数，表示行高是字体大小的倍数

image.png

行间距=行高-字体大小

font 字体的简写属性

• 语法：字体大小/行高 字体族；
  
  image.png
  
  font-weight设置字体加粗效果
  • normal默认值
  • bold加粗 100-900九个值指定文字粗细的级别
  • 不同字体粗细实际上是由计算机中不同字体决定的，但是通常计算机中不会安装这么多不同粗细的字体，所以100-900并不是所有的值都会发生变化，值大不一定粗

font-style设置字体斜体

• font-sty1e设置字体的斜体
  normal默认值正常显示
  italic 表示斜体
  font简写属性,可以同时设置所有的字体相关的样式
  书写语法:
  1、字体族必须是最后一个属性
  2.字体大小必须是倒数第二个
  3、这两个属性必须写
  4、其他属性写不写,顺序都无所谓
  字体大小和字体族有要求，其他的都没有要求

一个字体是否可用，主要看用户的计算机中是否安装了该字体，有一些特殊情况，在网页中使用一些特殊字体，而这些字体用户并没有安装，此时我们可以在服务器用户提供字体，用户浏览器会自动根据需要从服务器中下载使用，如果用户没有，需要通过font-face 来设置服务器的字体
通过@font-face可以使用户使用服务器的字体

image.png

font-family为字体定义一个名字

image.png

字体路径

image.png

让这两者关联

image.png

先让字体名和服务器关联，然后box1想用什么字体就用什么字体

image.png

虽然可用通过font-face来使用特殊字体，但在开发中要尽量避免使用

• font-face字体在服务器，用户使用需要先从服务器下载会影响用户的体验
• 大部分的字体都有版权问题，如果随意的使用一些字体会涉及到侵权
  每一个字体本质上是一个图（矢量图）
  • 矢量图的大小和颜色可以任意改变，不会失真

网页中很多这样的小图标

image.png

字体本身存在有很多优点，可以随意放大，可以任意改变颜色

• 如果可以将网页中的小图标都制作为一个字体文件，这样我们就可以以使用字体的方式去创建这些小图标了
• 这种技术我们成为图标字体（iconfont）

图标字体一般是由设计人员做，也可以直接使用网上的一些图标字体库（是字体就有版权，有版权的别用）
图标字体库fontawesome使用方法
1.下载图标字体库
2.解压
3.在项目目录下创建一个文件夹
4.将解压后的css和webfonts复制到iconfont目录中
5.在当前页面中引入all.css
6.在页面中创建一个元素，并添加两个class
，分别是fas和fa-frog

图标用法

image.png

什么叫库
库里面都是人家写好的代码，拿过来就可以直接使用过了
webfont就是一个个的字体
all.css在开发的时候用
all.min.css在生产环境中使用
两者效果是一样的
[图片上传中...(image.png-dd0363-1585635951124-0)]
这就是fa涉及的样式

image.png

fas就是在应用上设置这个字体
fa-frog指定具体要用哪个图标
免费的字体格式有两种
fas（solid）实体的图形
fab（brand）品牌相关的图形

image.png

前面不是fas就是fab，后面根据需要写

image.png

使用方式：
1.通过class来使用（这种常用）
2.直接写编码，直接通过实体来表示，&#x编码；

image.png

image.png

3.可以通过伪元素去使用图标字体
（content:"\编码"）

image.png

这些都是十六进制的编码

image.png

\用来转义特殊字符

image.png

image.png

不同字体设置不同格式

这样也能出来

image.png

也可以直接参考里面提供的demoHTML文件
这种是伪类的写法

image.png

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
这两个应该是处理浏览器兼容问题的

创建苏宁左右翻页箭头

image.png

在head里面引入图标字体库

image.png

设置翻页箭头样式，宽高，颜色，开启绝对定位
两个都设置垂直居中
top，bottom，margin：auto 0
单独设置一个右箭头
right：0

image.png

设置透明颜色

image.png

箭头设白色

水平垂直方向居中

image.png

设置hover改变背景颜色和字体颜色
两个箭头默认是不显示的
display：none
移入的时候要出来
outer绑定一个hover

image.png

图标字体（iconfont）

• 就是让我们可用使用字体的形式去使用小图标
• 优点：
  1.使用方便
  2.图片可用任意放大缩小改变颜色
• 缺点：
  图标字体只能单色的

text-indent 首航缩进

一个字16，两个就32像素
缩进两个也可以这样写

image.png

它可以是正值可以是负值
如果是负值就往反方向缩进
可以通过text-indent ：-9999px；来隐藏文字
这种方式经常用到希望被搜索引擎看到不希望被用户看到的文字

一般logo用h1标签
这里只有图标没有字

image.png

会放个字，希望搜索引擎能抓到这个东西

image.png

text-decoration，文本修饰

可选值：

• none啥都没有
• underline下划线
• line-through删除线
• overline 上划线

text-align:文本水平对齐
可选值

• left 左对齐
• right 右对齐
• center 居中对齐 （两端都不齐）
• justify 两端对齐 （把中间的间距调大了）