CSS字体和背景总结

六、字体和背景

1、字体

（1）字体的加载

为防止所指定的字体用户电脑中没有，可以在服务器中设置字体，用户从服务器中调用相应的字体使用。存在的问题：

• 加载速度

• 版权
  当我们正常使用font-family时后面所写的字体样式是建议用户使用这样的字体，如果用户电脑中安装了所建议的字体，那会正常显示，版权问题归到用户一方，与程序员无关；
  但是如果使用@font-face从服务器上为用户指定字体样式，则字体样式为程序员一方所持有，版权问题归到程序员。

• 字体格式

@font-face {
  /* 为所要加载的字体起名字，在后面要设置字体样式的地方，可以直接使用这个名字 */
  font-family: "myfont";
  /* 查找所要加载的字体的路径 */
  src: url("");
}

（2）字体的样式

color: 用来设置字体的颜色
font-size: 字体的大小
和font-size相关的单位
em相当于当前元素的一个font-size
rem相当于根元素的一个font-size
font-family字体族，可选值：
serif:衬线字体
sans-serif:非衬线字体
monospace:等宽字体
这三个值用来指定字体的类别，浏览器会自动根据所指定的类别使用该类别下的字体，font-family可以同时指定多个字体，多个字体间使用,隔开。字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推。

p{
  color: saddlebrown;
  font-size: 40px;
  font-family: "宋体";
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-family: myfont;
}

（3）图标字体

在网页中经常需要使用一些图标，可以通过图片来引入图标，但是图片大小本身比较大，并且非常不灵活。所以在使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入，这样就可以通过使用字体的形式来使用图标。

• fontawesome

  使用步骤：

  • 下载 https://fontawesome.com

  • 解压

  • 将CSS和webfonts文件移动到项目中

  • 将all.css文件引入到网页中

    <link rel="stylesheet" href="./fa/css/all.css">
    

  • 使用图标字体，直接通过类名来使用图标字体

    <i class="fas fa-bell" style="color: salmon;"></i>
    <i class="fab fa-500px"></i>
    

  图标字体的其他使用方式：

  通过实体来使用图标字体，在class中写入对应的fas或fab，在内容区写上相应的字体编码，格式为：&#x图标编码

  <span class="fas">&#xf653</span>
  

  通过伪元素来设置图标字体:

  • 找到要设置图标的元素通过before或after选中

  • 在content中设置字体的编码

  • 设置字体的样式
    fab：font-family: 'Font Awesome 5 Brands';
    fas：font-family: 'Font Awesome 5 Free';

  li::before{
    content: "\f0f4";
    /* font-family: 'Font Awesome 5 Brands'; */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
  }
  

• 阿里字体库

  在https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a中将需要使用的字体下载后引入到网页中<link rel="stylesheet" href="./if/iconfont.css">

  使用方式：

  标签引入

      <i class="iconfont">&#xe6ae;</i>
      <i class="iconfont" style="color: seagreen;">&#xe6b2;</i>
      <i class="iconfont iconboshimao"></i>
  

  css引入

      i.iconfont{
          font-size: 100px;
      }
      p::before{
          content: "\e6b0";
          font-family: "iconfont";
          font-size: 100px;
          color: salmon;
      }
  

（4）行高

行高（line-height）指的是文字占有的实际高度，可以通过line-height来设置行高，行高可以直接指定一个大小（px,em），也可以直接为行高指定一个整数。如果行高是一个整数的话，行高将会是字体的整数倍数，默认的行高是1.33。

字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度，行高会在字体框上下平均分配

可以为行高设置为和高度一样的值，使单行元素在一个元素中居中

（5）字体的简写属性

font可以设置字体相关的所有属性，语法：font:字体大小/行高 字体族，行高可以省略不写，但是不写意味着使用默认值，如果在前面已经设置了行高，则在这里就会被默认值所覆盖。

font-size: 50px;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font: 50px/2 Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

也可以在同时为font设置字重和字体风格，语法：font:自重 字体风格 体大小/行高 字体族，同样，如果没有在此设置字重和字体风格，则会使用默认值normal，如果在前面已经设置字重和字体风格则会被覆盖掉。

font-weight字重字体加粗，可选值：
normal：默认值，不加粗
bold：加粗，100-900九个级别（没什么用）

font-style字体的风格
normal：正常的
italic：斜体

font-weight: bold;
font-style: italic;
<div> 阁中帝子今何在？槛外长江空自流what a pity</div>

字体的简写属性.png

2、文本的样式

（1）文本的水平对齐

text-align可选值：
left：左侧对齐
right：右侧对齐
center：居中对齐
justify：两端对齐

        div{
            width: 800px;
            border: 1px red solid;
            text-align: center;
            font-size: 50px;
        }

（2）文本垂直对齐方式

vertical-align可选值：
baseline默认值，基线对齐（文本底部基础线）
top顶部对齐
bottom底部对齐
middle居中对齐
注意：
这里的居中对齐并不是相对于父元素居中，而是相对于前一个文本x的居中，即x的中心点为其中轴线

          span{
            border: 1px red solid;
            font-size: 20px;
            vertical-align: middle;
          }
          <div>今天天气真烂,shitx<span>bad</span></div>

文本的样式.png

想要去除图片与边框之间的很小的距离，只需要将图片的垂直对齐方式设置为非baseline即可

（3）设置文本修饰

text-decoration可选值：
none：什么都没有
underline：下划线
line-through：删除线
overline：上划线

.box2{
  font-size: 50px;
  text-decoration: line-through;
}
<div class="box2">今天天气太糟了</div>

文本修饰.png

（4）网页留白处理

white-space用来设置网页如何处理空白，可选值：
normal：正常
nowrap：不换行
pre：保留空白

text-overflow 属性规定当文本溢出包含元素时发生的事情，可选值：
clip：修剪文本
ellipsis：显示省略符号来代表被修剪的文本
string：使用给定的字符串来代表被修剪的文本

        .box1{
            width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    <div class="box1">
        could these humble rows of trees prevent a natural disaster? 
    </div>

文本溢出.png

3、背景

（1）设置背景

background-image用来设置背景图片，可以同设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色。如果背景图片小于元素，则背景图片会自动在元素中平铺把元素撑满；如果背景图片大于元素，则会有一部分背景图片无法显示；如果背景图片和元素一样大，则会直接正常显示。

（2）背景的重复

background-repeat用来设置背景的重复方式，可选值：
repeat: 默认值，背景会沿着x轴，y轴双方向重复
repeat-x: 沿着x轴方向重复
repeat-y: 沿着y轴方向重复
no-repeat: 背景不重复

（3）背景的位置

background-position用来设置背景图片位置，设置方式：
通过top,left,right,bottom,center几个表示方位的词来设置背景图片的位置，使用方位词时必须要同时指定两个值，如果只写了一个值，则第二个值默认是center

通过偏移量也可以指定背景图片的位置，第一个值表示水平方向的偏移量，第二个值表示垂直方向的偏移量

（4）背景的范围

• background-clip用来设置背景的范围，可选值：
  border-box: 默认值，背景会出现在边框下面
  padding-box: 背景不会出现在边框，只会出现在内容区和内边距
  content-box: 背景只会出现在内容区

• background-orgin用来设置背景图片的偏移量计算原点，可选值
  padding-box: 默认值，background-position从内边距开始计算
  content-box: 背景图片的偏移量从内容区处计算
  border-box: 背景图片的偏移量从边框开始计算

• background-size用来设置背景图片的大小，可选值：
  两个值：第一个值表示宽度 第二个值表示高度。如果只写一个，则第二个值默认是auto，即等比例缩放
  cover：图片的比例不变，将元素铺满，图片超出部分不显示
  contain：图片比例不变，将图片在元素中完整显示，未铺满部分有背景颜色填充

• background-attachment用来设置背景图片是否跟随元素移动，可选值：
  scroll: 默认值，背景图片会跟随元素移动
  fixed: 背景图片会固定在页面中，不会碎元素移动

        .box1{
            width: 500px; height: 500px;
            border: 10px red double; padding: 10px;
            overflow: auto;
            background-color: #bbffaa;
            background-image: url(2.jpg);
            background-repeat: no-repeat;
            background-position: 20px 20px;
            background-clip: content-box;
            background-origin: border-box;
            background-size: contain;
        }
        .box2{
            width: 300px; height: 1000px;
            background-image: url(1.png);
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    <div class="box1">
        <div class="box2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt dicta                         dignissimos maiores! Quam dolorum tempora sequi sed maxime, accusamus                           totam suscipit laudantium, adipisci nisi sapiente hic velit ducimus                                 voluptate. Similique.
        </div>
    </div>

背景.gif

（5）背景的简写

background背景相关的简写属性，所有的背景相关的样式都可以通过该样式来设置，并且该样式没有顺序要求，也没有哪个属性必须要写，需要注意的是：

• background-size必须写在background-position的后面，并且使用/隔开
  background-size/background-position

• background-clip要写在background-orgin的后面

4、雪碧图的使用

图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载，浏览器加载外部资源时是按需加载的，用则加载，不用则不加载。因此在打开网页时，link会首先加载，hover和active会在触发时才会加载。

解决图片闪烁问题
可以将多个小图片统一保存到一个大的图片中，然后通过background-position来显示不同的位置，这样图片会同时加载到网页中，就可以有效的避免出现闪烁问题。这个技术在网页中应用十分广泛，被称为CSS-Sprite，这种图也称为雪碧图。

雪碧图的使用步骤

• 先确定要使用的图标

• 测量图标的大小

• 根据测量结果创建一个元素

• 将雪碧图设置为元素的背景图片

• 设置一个偏移量以显示正确的图片

雪碧图的特点：一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户体验

5、渐变

通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果
注意：渐变是图片，需要通过在background-image中设置

（1）线性渐变

linear-gradient()设置线性渐变，颜色沿着一条直线发生变化

linear-gradient(red,yellow)表示红色开头黄色结尾，中间是过渡区域

在线性渐变的开头可以指定一个渐变方向to left、to right、to top 、to bottom、deg 表示度数、turn 表示圈

渐变可以指定多个颜色，多个颜色默认情况下均分，也可以在每个颜色后面手动指定渐变的起始位置

repeating-linear-gradient()可以平铺的线性渐变

background-image: linear-gradient(red,yellow);
background-image: linear-gradient(to left,black,green,red, yellow,white);
background-image: linear-gradient(to top left,black,green,red, yellow,white);
background-image: linear-gradient(160deg,pink,black);
background-image: linear-gradient(.7turn,pink,black);
background-image: repeating-linear-gradient(to right,red,yellow 50px);

渐变.png

（2）径向渐变

radial-gradient()设置径向渐变（放射性效果），默认情况下径向渐变的形状根据元素的形状进行计算了，正方形对应圆形，长方形对应椭圆形。也可以手动改变径向渐变的大小，circle圆形、ellipse椭圆形，也可以指定渐变的位置，语法：
radial-gradient(大小 at 位置，颜色，位置，颜色，位置)

大小：circle圆形、ellipse椭圆、cloest-side近边、farthest-side远边、farthest-corner远角

位置：top、bottom、left、right、center

        .box1{
            width: 200px;
            height: 200px;
            background-image: radial-gradient(green,red);
        }
        <div class="box1"></div>

径向渐变.png