HTML和CSS ——9、字体设置相关

字体

一、字体相关的样式

1.1 color、font-size、font-family和font-face

1. color

   • 用来设置字体颜色

2. font-size

   • 字体的大小
   • 和font-size相关的单位，em相当于当前元素的一个font-size，rem相当于根元素的一个font-size

3. font-family

   • 字体族（字体的格式），
   • 可选值：（指定字体的类别，浏览器会自动使用该类别下的字体）
     • serif 衬线字体
     • sans-serif 非衬线字体
     • monospace 等宽字体
   • font-family可以同时指定多个字体，多个字体间使用，隔开字体生效时有限使用第一个，第一个无法使用则使用第二个，以此类推
   • windows下字体的存储位置，C:\Windows\Fonts

4. font-face可以将服务器字体提供给用户使用，使得用户可以加载这种字体

   • 其中有两个值

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

1.2 行高

line-height

• 可以将行高设置为高度一样的值，使单行文字在一个元素中垂直居中

• 行高(line-height)

  1. 行高指的是文字占有的实际高度

  2. 可以通过line-height来设置行高

     ​ 行高可以直接指定一个大小（px em），也可以直接为行高设置一个整数，如果是一个整数的话，行高将会是字体的指定倍数

  3. 行高经常还用来设置文字的行间距

     ​ 行间距 = 行高 - 字体大小

• 字体框

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

1.3 字体的简写属性

• font 可以设置字体相关的所有属性

  • 语法 font：字体大小/行高 字体族

    ​ 行高 可以省略不写 如果不写使用默认值

1.4 font-weight、font-style

• font-weight 字重 字体的加粗
  • 可选值：
    1. normal 默认值，不加粗
    2. bold 加粗
    3. 100-900 九个级别（没什么用）
• font-style 字体风格
  • 可选值
    1. normal 正常的
    2. italic 斜体

1.5、文本的水平和垂直对齐

• 文本的水平对齐

  • text-align 文本的水平对齐

    可选值：

    1. left 左侧对齐 2. right 右对齐

    2. center 居中对齐 4. justify两端对齐

• 设置元素垂直对齐方式

  • vertical-align

    可选值：

    ​ 1.baseline 默认值，基线对齐 2.top顶部对齐

    ​ 3.bottom底部对齐 4.middle 居中对齐

1.6 其他文本样式

• text-decoration 设置文本样式

  • 可选值
    1. none 什么都没有
    2. underline 下划线
    3. line-through 删除线
    4. overline 上划线

• white-space 设置网页如何处理空白,段落一行最后面换行处的空白

  • 可选值
    1. normal 正常
    2. nowrap 不换行
    3. pre 保留空白

  <!-- 溢出内容设置省略号 -->
  <style>
      div{
          white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis;
      }
  </style>
  

二、图标字体简介

• 图标字体

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

• fontawesome 使用步骤

  1. 下载地址 http://fontawesome.com/

  2. 解压

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

  4. 将all.css引入到网页中

  5. 使用图标字体

     ​ 直接通过类名来使用图标字体，class=“fas fa-bell”