CSS字体和文本相关

一 前言

目前在作IFE的练习，初步学习到CSS内容，因此作了总结。
本博文主要分为两部分，第一部分介绍CSS字体属性，第二部分则介绍了文本经常使用属性

二 字体属性

2.1 字体系列

S1 首先介绍一下什么是字体系列:

所谓字体系列,我理解的就同一字体下 的不一样风格的具体字体的集合。通俗类比一下，咱们知道楷书下有不一样风格的字体，好比颜体、柳体、瘦金体等等，这些是具体的不一样风格的字体。可是，他们都属于楷体，只是具体的细节有差别。这里的楷体，就能够看作

是一个单独的字体系列。

S2 接下来介绍，CSS预约义的5种通用字体系列
  Serif字体: 有修饰性的衬线（修饰线条），并且字符之间是成比例的（宽度不一致）;
  Sans-serif字体: 没有衬线，字符成比例;
  monospace字体: 每一个字符具备相同宽度的字体，一般用于代码列表;
  Cursive字体: 模拟人类笔迹的字体，具备流动的链接笔画;
  Fantasy字体: 装饰性的各类 “浮夸” 字体

S3 定义字体系列的方法
使用font-family属性来定义字体系列
  A1 能够指定一个通用字体系列;
  A2 能够指定一个具体的字体系列，注意当该具体字体系列在客户端不可用时，浏览器会使用默认设置字体显示;
因此，最好的方法是，结合特定字体名和通用字体系列，以实现平稳退化原则

S4 特别注意
若是一个字体名中有一个/多个空格/特殊字符如#、$之类的，须要用引号声明字体，以下代码例子:

p { font-family: "Trebuchet MS", Verdana, sans-serif; }

网页安全字体
关于网页安全字体的概念，参见MDN基本文本和字体样式;

2.2 字体加粗

S1 首先介绍字体加粗属性font-weight
  A1 值是关键字/100~900的整百数值，
  通常状况下，400≈normal / 700≈bold，
  关于数值加粗的原理，详情见 CSS权威指南P109 ,真正用的时候，通常直接用数值试一试便可

  A2 具备继承性

S2 bolder/lighter属性值的原理
  A1 肯定继承自父元素的font-weight值;
  A2 选取比继承的font-weight对应值 + 更粗一级数值中的 + 最小的数值;
  A3 若是继承的font-weight值 已是 最大900/最小100，那么bolder/lighter值保持不变

2.3 字体大小

S1 首先介绍字体大小属性font-size
  A1 值能够是 关键字/ length / percentage / em / rem
  关键字: 实际开发中不多使用
  em/百分比: 根据父元素的字体大小计算， 1em = 当前元素的父元素上 设置的字体大小
    由于具备继承性，因此可能会致使缩放失控，好比:
    A 祖先元素:12px;
    B 父元素: 120%, 即 12 * 1.2 = 14.4px(可能会取整);
    C 子元素: 135%, 即 14.4 * 1.35 = 19.44px

  rem: 1rem 等于 HTML 中的根元素的字体大小,推荐使用

  A2 具备继承性

S2 明确一个重要概念:
  A1 每种字体的字符设计大小通常都等于小于 其模板框em框大小;
  A2 font-size的做用就是设置给定字体的em框的大小，而不能保证明际显示的字符大小

简而言之，就是font-size负责的是模具的大小，而不是真正实际字符的大小

2.4 字体风格和变形

S1 字体风格属性font-style
  A1 值能够是 normal / italic/oblique (一般二者效果是同样的，都是斜体)

S2 字体变形属性font-variant
  A1 值能够是 small-caps, 用于建立 小型大写字母文本（具体效果见CSS权威指南P124）

S3 字体拉伸属性font-stretch，了解便可
S4 字体大小调整属性font-size-adjust，了解便可

2.5 字体相关属性简写

S1 全部字体属性的 集合属性font
  A1 通常值是 font-style/font-weight/font-variant(可交换顺序) + font-sieze + font-family

  A2 值还能够是 line-height （不推荐合并写，不利于维护）

  A3 值还能够是 caption/icon/menu等系统字体设置，能够创造出和默认操做系统同样的字体效果 (见P131)

S2 特别注意，全部未显式赋值的font值，都会被浏览器自动赋予默认值

2.6 字体匹配过程

S1 具体过程了解便可，见P132-133

3、文本属性

3.1 缩进和水平对齐

S1 文本缩进属性text-indent
  A1 值能够是 length / em/百分比 (相对于包含块的宽度值)
  其中，值的长度能够是负值，从而创造出“悬挂缩进的效果”

  A2 应用于 块级元素，没法应用于行内元素&替换元素(若是想要行内元素有缩进效果，可使用左内边距/外边距)

  A3 缩进只应用于一个块级元素的第一行内容

  A4 具备继承性

S2 文本水平对齐属性text-align
  A1 值能够是 left / center /right / justify
  其中，justify表示两端对齐文本 (P140)

  A2 应用于 块级元素
  A3 具备继承性

3.2 行高

S1 什么是line-height属性
  A1 指的是文本行之间的 最小基线距离，换言之，文本行间的距离可能比line-height值更大
  A2 行间距 = line-height值 - font-size值

S2 理解行内元素高度如何肯定(并不绝对精确，只是大概状况)
  A1 font-size值， 肯定了 内容区大小;
  A2 line-height值，肯定了 行内框高度;
  A3 行框（从最高行内框的顶部 到 最低行内框的底部），肯定了 一行行内元素的高度

S3 属性特色
  A1 值多是 length / em / number / normal
  normal值，一般状况下是字体大小的 1.2倍 (font-size * 1.2)
  em/百分比，相对于的是 元素的字体大小(注意，不是父元素的字体大小，只有没有显式继承该元素的fz,才会根据fz继承性向上找)

  A2 能够应用于全部元素 (对于块级元素和内联元素的区别，详见其余博文)

  A3 能够继承
    由于具备继承性，因此可能会有如下状况: 继承的div元素的line-height值小于 显式设置的fz值，致使拥挤
    解决方法是，使用number做为“继承因子”，这样各个元素都会根据本身的fz值，来计算line-height值了

3.3 垂直对齐

S1 文本垂直对齐属性 vertical-align
  A1 值能够是 middle/bottom等关键字 length / em/百分比 (相对于该元素的line-height值)
  A2 应用于 行内元素和替换元素(图像/表单等)
  A3 不能够继承
  A4 注意，全部垂直对齐的元素都会影响行高，换句话说，一行元素的行高 会包含住垂直对齐的高度

S2 基线对齐状况
  A1 对行内元素，基线对齐是指：元素的基线与其 父元素的基线 对齐;
  A2 对替换元素，基线对齐是指：元素的底端与其 父元素的基线 对齐 （由于替换元素压根就没有基线）
  这就会致使，可能图像下方会出现一段空白的问题

  A3 百分比/em 对齐状况
    会把 行内元素的基线 /替换元素的底边，相对于父元素的基线升高/下降数值

S3 居中对齐状况
  A1 对middle值，指的是： 元素行内框的中点 与其 父元素基线上方0.5ex处的一个点对齐;

S4 顶端/底端对齐状况
  A1 对bottom值，指的是： 元素行内框的底部 与其 所属行框的底部对齐;
  A2 对text-bottom值，指的是: 对行内元素的 行内文本内容区 对齐 + 对替换元素无效

3.4 字间隔 和 字母间隔

S1 字间隔属性 word-spacing
  A1 值能够是 length / em / normal
  A2 应用于 全部元素
  A3 用于修改字和字之间的距离，了解便可

S2 字母间隔属性 letter-spacing
  A1 值能够是 length / em / normal
  A2 应用于 全部元素
  A3 能够用来制造出 突出强调的效果 (见P152)

3.5 文本转换

S1 文本大小写 转换属性 text-transform
  A1 值能够是 uppercase等关键字
  A2 应用于 全部元素

3.6 文本装饰

S1 文本装饰线 属性 text-decoration
  A1 值能够是 underline等关键字
  A2 应用于 全部元素
  A3 不能够继承,但能够 覆盖下划线样式（P158）

3.7 文本阴影

S1 文本阴影 属性 text-shadow
  A1 值能够是 color + 右偏移长度 + 下偏移长度 + [模糊半径]
  A2 应用于 全部元素
  A3 不能够继承

S2 能够实现多重阴影

3.8 其余

S1 文本空白符和换行属性 white-space
  A1 值能够是 pre / nowrap / pre-wrap / pre-line
  值为pre时：保留HTML内容中的空格
  值是nowrap: 阻止元素内的文本换行

  A2 应用于 全部元素
  A3 不能够继承
  A4 具体表格见 P162

4、参考文档

  1 CSS权威指南;
  2 MDN的 基本文本和字体样式;
  3 CSS 文本;
  4 CSS 字体;