关于css:fonttext样式

一. 字体款式 font

1. font-color 字体色彩

2. font-style 字体款式

          italic 斜体
          normal 失常字体【默认】

3. font-weight 字体粗细

          bold    粗体
          lighter 更细的字体
          normal  失常字体【默认】100 ~ 900   数值越大，字体越粗
              400 normal
              800 bold

4. font-size 字体大小

          px
          浏览器的默认字体大小是 16px

5. line-height 行高

          取值是包裹该字体的元素高度，即可文字垂直居中
          <div style="height:200px; line-height:200px;">123</div>
   

6. font-family 字体族

          '微软雅黑'
          'Microsoft YaHei'
          serif 衬线
          sans-serif 没有衬线
          fangsong 政府文件
   速写
      font:font-style font-weight font-size fonnt-family；1. 必须蕴含 font-size、font-family
          2. font-style 和 font-weight 必须在 font-size 之前
          3. font-family 必须放在最初
   

7. webfont

          @font-face
              1. 下载 ttf 字体文件
              2. 放到绝对应的目录(我的项目的目录)
              3. style 标签中通过 @font-face 引入
                  @font-face {
                      font-family: 'myfont';
                      src: url('./ 文件名.ttf');
                  }
              4. 在须要字体的中央应用
                  div {font-family:'myfont';}
                  

字体图表库 iconfont、fontawesome

            iconfont
                1. 更改图标的大小的时候，要应用 font-size
                2. 选中须要更改的图标时，须要通过类名选中
               
            fontawesome
            

iconfont:

1. 图标退出我的项目 -> 在线链接中的 fontclass->css 文件内容 复制到 VScode 中新建的 css 文件中

2.html 文件 link css 文件，i 标签增加图标 (class=”iconfont 图标类名 ”)

留神：
1. 增加图标，更新整个 css 文件，html 中增加新的 icon
2. 更改图标大小

1. 批改单个 icon -- 类名
.icon-yonghu{font-size:30px;}
2. 批改所有 icon
 .iconfont{font-size:30px;}

fontawesome

www.bootcdn.cn->font-awesome-> 复制 link 标签到 html
class 中批改图标名，大小

二. 文本款式 text

text-align 文本在以后元素中的对齐形式

        left
        center
        right
        justify

text-decoration

        underline   下划线
        overline    上划线
        line-through 删除线

text-shadow 文本暗影

        px  x 轴偏移
        px  y 轴偏移
        blur 含糊间隔
        color 色彩
        text-shadow:10px 10px 2px red 

text-transform 文本变形

        lowercase   小写
        uppercase   大写
        capitalize  首字母大写

text-indent 首行缩进

        2em 2%

三. 列表款式

    list-style:none; 将 li 标签的默认的款式打消

四. 拓展

1. 文字的程度垂直居中

          程度:text-align:center;
          垂直:line-height: 父元素的高度;

2. 打消 a 标签的默认款式

      color:#333;
      text-decoration:none;
      cursor:default;
          pointer -- a 标签默认
          wait
          help

3. 子元素在父元素中程度垂直居中

      父元素：display:table-cell;
      vertical-align: middle;
      align-items: center;
      子元素
      display:inline-block;

五. 单位

1) 色彩

1. 关键字
    red、yellow...
    color:red;
2. 十六进制色彩
    color:#333333 ==> color:#333;
3. rgb 函数
    r red
    g green
    b blue
    color:rgb(0,0,0);
    0 ~ 255
4. rgba 函数
    r red
    g green
    b blue
    a 色彩透明度
    color:rgba(0,0,0,0.5);
    0 ~ 255 / 0 ~ 1
*** opacity 与 rgba 函数的区别 ***
    opacity 父元素的透明度会影响到子元素，且子元素无奈设置为失常透明度
    rgba 函数 透明度仅仅会作用于父元素，不会影响子元素
5. 渐变色
    background-image: linear-gradient(to right,red,yellow);
    从左向右，从红色突变到黄色

2) 长度

相对单位  px
绝对单位  em  
        以后文本的包裹元素上的 font-size
        <div style='font-size:18px;'>123321</div>
        1em = 18px
        2em = 36px;
    %   绝对于父元素
    rem   绝对于根元素 html