一、字体 font

1.字体（font）

字体相关的样式

color 用来设置字体颜色;

font-size 字体的大小;

em 相当于当前元素的一个font-size
rem 相对于根元素的一个font-size

font-family 字体族（字体的格式）。

可选值：

serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
- 指定字体的类别，浏览器会自动使用该类别下的字体
- font-family 可以同时指定多个字体，多个字体间使用,隔开字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推。

eg. Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif

指定的字体用户计算机上没有时，@font-face可以将服务器中的字体直接提供给用户去使用，但要考虑三个问题。

问题：

加载速度
版权
字体格式

<style>
    @font-face {
            /* 指定字体的名字 */
        font-family:'myfont' ;
        /* 服务器中字体的路径 */
        src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
    }

    p{
        color: blue;
        font-size: 40px;

         font-family: 'Courier New', Courier, monospace;
        /*font-family: myfont;*/
    }
</style>

2.图标字体（iconfont）

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

fontawesome 使用步骤

1.下载 fontawesome.com/

2.解压

3.将css和webfonts移动到项目中

4.将all.css引入到网页中
<link rel="stylesheet" href="./fa/css/all.css">
5.使用图标字体 - 直接通过类名来使用图标字体 class="fas fa-bell" class="fab fa-accessible-icon"

在zeal中查找font awesome文档

<div style="font-size: 2rem; color:#1bc4fb">
<i class="fa fa-compass"></i>
<i class="fas fa-bell" style="font-size:80px; color:red;"></i>
<i class="fas fa-bell-slash"></i>
<i class="fab fa-accessible-icon"></i>
<i class="fas fa-otter" style="font-size: 160px; color:green;"></i></div>

在style里设置样式的方式

    <style>
        li{
            list-style: none;
        }

        li::before{
            /* 
                通过伪元素来设置图标字体
                    1.找到要设置图标的元素通过before或after选中
                    2.在content中设置字体的编码
                    3.设置字体的样式
                        fab
                        font-family: 'Font Awesome 5 Brands';

                        fas
                        font-family: 'Font Awesome 5 Free';
                        font-weight: 900; 

            */
            content: '\f209';
            /* font-family: 'Font Awesome 5 Brands'; */
            font-family: 'Font Awesome 5 Brands';
            font-weight: 900;
            color: skyblue;
            margin-right: 10px;
        }
    </style>
</head>
<body>

    <!-- <i class="fas fa-cat"></i> -->

    <ul>
        <li>锄禾日当午</li>
        <li>汗滴禾下土</li>
        <li>谁知盘中餐</li>
        <li>粒粒皆辛苦</li>
    </ul>

    <!-- 

        通过实体来使用图标字体：
            &#x图标的编码;
     -->
    <span class="fas">&#xf0f3;</span>

3.使用阿里字体库iconfont

iconfont支持三种方式使用图标字体

Unicode
Font class
Symbol

以这三个图标字体为例，说明引用方法。

--Unicode 引用

Unicode 是字体在网页端最原始的应用方式，特点是：

支持按字体的方式去动态调整图标大小，颜色等等。
默认情况下不支持多色，直接添加多色图标会自动去色。

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

Unicode 使用步骤如下：

第一步：在 HTML 页面为字体增加 preload，提升字体加载速度：

<link rel="preload" href="//at.alicdn.com/t/font_2767900_d39nq4o3qgk.woff2" as="font" type="font/woff2" crossorigin="anonymous">

第二步：拷贝项目下面生成的 `@font-face`

@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_2767900_d39nq4o3qgk.woff2?t=1629873424876') format('woff2'),
       url('//at.alicdn.com/t/font_2767900_d39nq4o3qgk.woff?t=1629873424876') format('woff'),
       url('//at.alicdn.com/t/font_2767900_d39nq4o3qgk.ttf?t=1629873424876') format('truetype');
}

第三步：定义使用 iconfont 的样式

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第四步：挑选相应图标并获取字体编码，应用于页面

<span class="iconfont">&#x33;</span>

"iconfont" 是你的项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。效果

--font-class 引用

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

与 Unicode 使用方式相比，具有如下特点：

相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。

使用步骤如下：

第一步：在 HTML 页面为字体增加 preload，提升字体加载速度：

<link rel="preload" href="//at.alicdn.com/t/font_2767900_d39nq4o3qgk.woff2" as="font" type="font/woff2" crossorigin="anonymous">

第二步：引入项目下面生成的 fontclass 代码：

<link rel="stylesheet" href="//at.alicdn.com/t/font_2767900_d39nq4o3qgk.css">

第三步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon-xxx"></span>

效果

Symbol 引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
兼容性较差，支持 IE9+，及现代浏览器。
浏览器渲染 SVG 的性能一般，还不如 png。

使用步骤如下：

第一步：引入项目下面生成的 symbol 代码：

<script src="//at.alicdn.com/t/font_2767900_d39nq4o3qgk.js"></script>

第二步：加入通用 CSS 代码（引入一次就行）：

<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

第三步：挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

效果

4.字体行高

行高（line height）

行高指的是文字占有的实际高度
可以通过line-height来设置行高行高可以直接指定一个大小（px em）也可以直接为行高设置一个整数如果是一个整数的话，行高将会是字体的指定的倍数
行高经常还用来设置文字的行间距行间距 = 行高 - 字体大小

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

 <style>
 div{
        font-size: 50px;

        /* 可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中 */
        line-height: 100px;

        border: 1px red solid;

        /* line-height: 1.33; */
        /* line-height: 1; */
        /* line-height: 10 */
    }
</style>

字体的简写属性

<style>
    div{
        border: 1px red solid;


        /* 
            font 可以设置字体相关的所有属性
                语法：
                    font: 字体大小/行高 字体族
                    行高 可以省略不写 如果不写使用默认值
        
        */

        /* font-size: 50px;
        font-family: 'Times New Roman', Times, serif; */
        font-weight: bold;
        /* font: 50px/2  微软雅黑, 'Times New Roman', Times, serif; */
        /* font: normal normal 50px/2  微软雅黑, 'Times New Roman', Times, serif; */
        font: bold italic 50px/2  微软雅黑, 'Times New Roman', Times, serif;
        /* font:50px 'Times New Roman', Times, serif;
        line-height: 2; */

        /* font-size: 50px; */

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

            font-style 字体的风格
                normal 正常的
                italic 斜体
        */
        /* font-weight: bold; */
        /* font-weight: 500;
        font-style: italic; */


    }
</style>

5.文本的布局

text-align

文本的水平对齐，可选值： - left 左侧对齐

right 右对齐
center 居中对齐
justify 两端对齐

vertical-align

设置元素垂直对齐的方式，可选值：

baseline 默认值基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐

文本的样式：

text-decoration 设置文本修饰

可选值：

none 什么都没有
underline 下划线
line-through 删除线
overline 上划线

white-space 设置网页如何处理空白

可选值：

normal 正常
nowrap 不换行
pre 保留空白

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

可以将多行文字只显示部分，并用省略号代替。

二、背景 background

1.background

background-image --设置背景图片

可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色
如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满
如果背景的图片大于元素，将会一个部分背景无法完全显示
如果背景图片和元素一样大，则会直接正常显示

.box1{
    width: 500px;
    height: 500px;
background-color: #bfa;

background-image: url("./img/1.png");
}

background-repeat 用来设置背景的重复方式

可选值：

repeat 默认值，背景会沿着x轴 y轴双方向重复
repeat-x 沿着x轴方向重复
repeat-y 沿着y轴方向重复
no-repeat 背景图片不重复

background-position 用来设置背景图片的位置

设置方式：

通过 top left right bottom center 几个表示方位的词来设置背景图片的位置
使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center
通过偏移量来指定背景图片的位置：水平方向的偏移量垂直方向变量

 background-repeat: no-repeat;
 background-position: -50px 300px;

设置背景的范围

background-clip 可选值： border-box 默认值，背景会出现在边框的下边 padding-box 背景不会出现在边框，只出现在内容区和内边距 content-box 背景只会出现在内容区
background-origin 背景图片的偏移量计算的原点 padding-box 默认值，background-position从内边距处开始计算 content-box 背景图片的偏移量从内容区处计算 border-box 背景图片的变量从边框处开始计算
background-size 设置背景图片的大小

第一个值表示宽度

第二个值表示高度

-如果只写一个，则第二个值默认是 auto

-cover 图片的比例不变，将元素铺满

-contain 图片比例不变，将图片在元素中完整显示


        background-color
        background-image
        background-repeat
        background-position
        background-size
        background-origin
        background-clip
        background-attachment

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

注意：

background-size必须写在background-position的后边，并且使用/隔开 background-position/background-size
background-origin background-clip 两个样式，orgin要在clip的前边

background-attachment 背景图片是否跟随元素移动

可选值：

scroll 默认值背景图片会跟随元素移动

fixed 背景会固定在页面中，不会随元素移动

3.线性渐变

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

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

linear-gradient(red,yellow) 红色在开头，黄色在结尾，中间是过渡区域。线性渐变的开头，我们可以指定一个渐变的方向。

to left
to right
to bottom
to top
deg deg表示度数
turn 表示圈
渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况

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

<style>
    .box1{
        width: 200px;
        height: 200px;

        
        /* background-image: linear-gradient(red,yellow,#bfa,orange); */
        /* background-image: linear-gradient(red 50px,yellow 100px, green 120px, orange 200px); */
        background-image: repeating-linear-gradient(to right ,red, yellow 50px);

    }
</style>

4.径向渐变

radial-gradient() 径向渐变(放射性的效果)

默认情况下径向渐变的形状根据元素的形状来计算的

正方形 --> 圆形

长方形 --> 椭圆形

我们也可以手动指定径向渐变的大小 circle ellipse
也可以指定渐变的位置
- 语法： radial-gradient(大小 at 位置, 颜色位置 ,颜色位置 ,颜色位置)
大小：

circle 圆形
ellipse 椭圆
closest-side 近边
closest-corner 近角
farthest-side 远边
farthest-corner 远角

位置： top right left center bottom

<style>
        .box1{
            width: 300px;
            height: 300px;

            background-image: radial-gradient(farthest-corner at 100px 100px, red , #bfa);
         }
    </style>

<style>
        .box1{
            width: 300px;
            height: 300px;

           background-image: radial-gradient(red, yellow, green)
        }
    </style>

CSS备忘录（四）font & background

一、字体 font

1.字体（font）

2.图标字体（iconfont）

3.使用阿里字体库iconfont

--Unicode 引用

第一步：在 HTML 页面为字体增加 preload，提升字体加载速度：

第二步：拷贝项目下面生成的 @font-face

第三步：定义使用 iconfont 的样式

第四步：挑选相应图标并获取字体编码，应用于页面

--font-class 引用

第一步：在 HTML 页面为字体增加 preload，提升字体加载速度：

第二步：引入项目下面生成的 fontclass 代码：

第三步：挑选相应图标并获取类名，应用于页面：

Symbol 引用

第一步：引入项目下面生成的 symbol 代码：

第二步：加入通用 CSS 代码（引入一次就行）：

第三步：挑选相应图标并获取类名，应用于页面：

4.字体行高

5.文本的布局

二、背景 background

1.background

3.线性渐变

4.径向渐变

第二步：拷贝项目下面生成的 `@font-face`