10. Font & Background

HaiyueNovember 11, 2023About 5 min

Font

font

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./reset.css">
    <style>
      /* 
        font-face可以将服务器中的字体直接提供给用户使用
      */
      @font-face{
        /* 指定字体的名字 */
        font-family: 'myfont';
        /* 服务器中的路径 */
        src: url('./font/xxxxx.ttf');
      }
      p{
        color: red;
        font-size: 40px;
        /*字体族: 可以使用多个字体，不同字体间使用,隔开*/
        font-family: "sans-serif"; 
        font-family: "微软雅黑"
        /* font-family: "monospace" */
        /* font-family: 'Courier New', Courier, monospace; */
      }
    </style>
  </head>
  <body>
    <p>Hello,大家好11</p>
  </body>
</html>

icon font 1

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./reset.css">
    <link rel="stylesheet" type="text/css" href="./fonts/css/all.css">
    <style>
      /*
        通过伪元素设置图标字体
          1. 找到要设置的图标代码
          2. 设置字体样式
       */
      li::before{
        content: '\f1b0';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        color: red;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
      <!-- 
        图标字体（iconfont）
          -- 在网页中经常需要使用一些图标，可以通过图片来引入图标
             但图片本省比较大，且非常不灵活
          -- 所以在使用图标时，可以将图标直接设置为字体
             然后通过font-face的形式来对字体进行引入
             这样就可以通过使用字体的形式来使用图标
          font awesome使用步骤：
            1. 下载(web版本)解压
            2. 将css和webfonts移动至项目目录中使用
            3. 将all.css引入至网页中
            4. 使用图标字体
              a. 直接通过类名使用图标字体
                        "fab"
                <i class="fas fa-bell" style="font-size:28px; font-color: red"></i>
              b. 
        -->

    <p>Hello,大家好11</p>
    <ul>
      <li>xxx</li>
    </ul>

    <span class="fas fa-cat">通过直接指定类名使用</span>
  </p>
    <span class="fas">通过实体使用&#xf0f3;</span>
  </body>
</html>

icon-font 2

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./reset.css">
    <link rel="stylesheet" type="text/css" href="./fonts/css/all.css">
    <style>
      /*
        通过伪元素设置图标字体
          1. 找到要设置的图标代码
          2. 设置字体样式
       */
      li::before{
        content: '\f1b0';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        color: red;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
      <!-- 
        图标字体（iconfont）
          -- 在网页中经常需要使用一些图标，可以通过图片来引入图标
             但图片本省比较大，且非常不灵活
          -- 所以在使用图标时，可以将图标直接设置为字体
             然后通过font-face的形式来对字体进行引入
             这样就可以通过使用字体的形式来使用图标
          font awesome使用步骤：
            1. 下载(web版本)解压
            2. 将css和webfonts移动至项目目录中使用
            3. 将all.css引入至网页中
            4. 使用图标字体
              a. 直接通过类名使用图标字体
                        "fab"
                <i class="fas fa-bell" style="font-size:28px; font-color: red"></i>
              b. 
        -->

    <p>Hello,大家好11</p>
    <ul>
      <li>xxx</li>
    </ul>

    <span class="fas fa-cat">通过直接指定类名使用</span>
  </p>
    <span class="fas">通过实体使用&#xf0f3;</span>
  </body>
</html>

Abbreviation of font

font: 字体大小{/行高} 字体族
font-weight 字重 字体的加粗
  可选值
    normal 默认值 不加粗 
    bold 加粗
    100-900 九个级别
font-style 字体风格
    normal 正常的
    italic 斜体

Text style

div{
  text-align: right;/* justify/left/center */
  vertical-align: /*默认值：
                      baseline(基线对齐)
                      top    顶部对齐
                      bottom 底部对齐
                      middle 居中对齐（和小写x中心对齐）
                      10px 像素值指定
                  */
  /*
     text-decoration 设置文本修饰
       可选值：
         none 无
         underline 下划线
         line-through 删除线
         
   */
  text-decoration: underline red dotted; /*IE浏览器不支持此种语法*/
}

img{
/*当引入图片时，指定垂直对齐方式，消除底边空隙*/
vertical-align: bottom;
}

Background

Basic

.box1{
  width: 500px;
  height: 500px;
  background-color: #bfa;
  background-image: url('.img/1.png');
  /*
    background-repeat: 用来设置背景的重复方式    
      可选值：
        repeat 默认值，沿着x和y说方向重复
        repeat-x
        repeat-y
        no-repeat
   */
  background-repeat: no-repeat;
  /*
    background-repeat: 用来设置背景的位置
      设置：top left right bottom center
      设左右两个方向的至，如果只设置一个值，则第二个时默认值center
      同时也可以通过设置偏移量进行位置设置
        backgrond-position: 100px 100px;
   */
  backgrond-position: center center;
  /*
    设置背景的范围
      background-clip
        可选值：
           border-box 默认值背景会出现在边框的下边
           padding-box 背景不会出现在边框，只出现内容去和内边距
           content-box 只出现在内容去
      background-origin 背景图片的偏移量的计算原点
           padding-box 默认值，background-position从内边距开始计算
           content-box背景图片的偏移量从内容去计算
           border-box 背景图片的变量从边框开始计算
      background-size设置背景图片的大小
         第一个表示宽度
         第二个表示高度
            如果只写一个，则另外一个为auto
         cover: 设置图片比例不变，将元素铺满
         contain: 设置图片比例不变，将图片完整显示
      background-attachment: scroll;
        设置图片是否跟随元素移动
        可选值：
           scroll 背景不固定，会随背景移动
           fixed 背景固定在页面中，不会随元素移动
      background 背景相关的简写属性，所有背景相关样式都可以通过该样式设置
        注意：
          background-size必须卸载background-position后边，且需使用/隔开
            background-position/background-size
          background-origin background-clip两个样式，origin需要在clip前面
   */
}

Linear Gradient

.box1{
  width: 200px;
  height: 200px;
  /* 
    通过渐变可以设置一些复杂的背景颜色
    ！！渐变式图片，通过background-image来设置
    线性渐变，颜色沿着仪表直线发生变化
      linear-gradient()
      linear-gradient(red,  yellow)    从上向下渐变
      linear-gradient(to right, red,  yellow)  从左向右渐变
      xxx deg表示度数
      linear-gradient(90deg, red,  yellow) 
      xxxturn 表示几圈
      linear-gradient(0.24turn, red,  yellow, orange) 
      渐变可以指定多个颜色，默认位置平均分配
      linear-gradient(0.24turn, red,  yellow, orange) 
      可以手动指定渐变位置(50px表示开始渐变的位置，之前式纯色)
      linear-gradient(0.24turn, red 50px,  yellow, orange) 

      平铺渐变
      background-image: repeating-linear-gradient(red, yellow 50px)
   */
}

Radial Gradient

.box1{
  background-color: #bfa;
  /*
    默认情况下，径向渐变根据形状来计算，也可手动指定径向渐变大小
    
   */
  background-image: radial-gradient(red, yellow)
  background-image: radial-gradient(red, yellow 100px)
  background-image: radial-gradient(circle, yellow 100px)
  background-image: radial-gradient(100px 100px at center, yellow 100px)
}