CSS字体(font)

教程大全  / 倒序浏览   ©

#楼主# 2020-2-16

跳转到指定楼层

马上注册,分享更多源码,享用更多功能,让你轻松玩转云大陆。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

字体

字体的颜色

color 用来设置字体颜色

字体的大小

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

字体的格式

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

font-face

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

图标字体

图标字体(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 保留空白
分享淘帖
回复

使用道具

您的回复是对作者最大的奖励

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于作者

Gyah_

新手猿

  • 主题

    3

  • 帖子

    3

  • 关注者

    0

Archiver|手机版|小黑屋|云大陆 | 赣ICP备18008958号-4|网站地图
Powered by vrarz.com!  © 2019-2020版权所有云大陆