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.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

四、参考文档

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