CSS字体和文本相关

摘要：本博文主要分为两部分，第一部分介绍字体属性，第二部分则介绍了文本常用属性二字体属性字体系列首先介绍一下什么是字体系列所谓字体系列我理解的就同一字体下的不同风格的具体字体的集合。这里的楷体，就可以看做是一个多带带的字体系列。

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

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基本文本和字体样式;

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值保持不变

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负责的是模具的大小，而不是真正实际字符的大小

S1 字体风格属性font-style
  A1 值可以是 normal / italic/oblique (通常两者效果是一样的，都是斜体)

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

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

S1 所有字体属性的 集合属性font
  A1 一般值是 font-style/font-weight/font-variant(可交换顺序) + font-sieze + font-family

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

  A3 值还可以是 caption/icon/menu等系统字体设置，可以创造出和默认操作系统一样的字体效果 (见P131)

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

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

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

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

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

  A4 具有继承性

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

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

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值了

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值，指的是: 对行内元素的 行内文本内容区 对齐 + 对替换元素无效

S1 字间隔属性 word-spacing
  A1 值可以是 length / em / normal
  A2 应用于 所有元素
  A3 用于修改字和字之间的距离，了解即可

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

S1 文本大小写 转换属性 text-transform
  A1 值可以是 uppercase等关键字
  A2 应用于 所有元素

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

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

S2 可以实现多重阴影

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 字体;