CSS字体(font)

字体

字体的颜色

color 用来设置字体颜色

字体的大小

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

字体的格式

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


  
    
    
    
    Document
    
  
  
    

今天天气真不错,Hello Hello How are you!

font-face

  • font-face可以将服务器中的字体直接提供给用户去使用
  • 问题:
    1. 加载速度
    2. 版权
    3. 字体格式


  
    
    
    
    Document
    
  
  
    

今天天气真不错,Hello Hello How are you!

图标字体

图标字体(iconfont)简介

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

使用图标字体的方法

fontawesome

  1. 下载 https://fontawesome.com/
  2. 解压
  3. 将css和webfonts移动到项目中
  4. 将all.css引入到网页中
  5. 使用图标字体
    • 直接通过类名来使用图标字体

      class="fas fa-bell"

      class="fab fa-accessible-icon"

阿里巴巴矢量图标库

详情见阿里的介绍

行高

行高(line height)简介

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

字体框

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

行高在布局中的应用

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

字体的粗细

  • font-weight 字重 字体的加粗
  • 可选值:
    1. normal 默认值 不加粗
    2. bold 加粗
    3. 100-900 九个级别(没什么用)

字体风格

  • font-style 字体的风格
  • 可选值
    1. normal 正常的
    2. italic 斜体

字体的简写属性

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

语法:

font: 字体大小 字体颜色 字体粗细 字体风格 字体大小/行高 字体族

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

文本的样式

text-align 文本的水平对齐

可选值:

  • left 左侧对齐
  • right 右对齐
  • center 居中对齐
  • justify 两端对齐

vertical-align 设置元素垂直对齐的方式

可选值:

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

text-decoration 设置文本修饰

可选值:

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

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

可选值:

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

你可能感兴趣的:(CSS字体(font))