1前言目前在做IFE练习，初步学习了CSS内容，所以做个总结。这篇博文主要分为两部分。第一部分介绍CSS字体属性，第二部分介绍常用文本属性。2、字体属性2.1字体家族S1首先介绍一下什么是字体家族：所谓字体家族，我的理解就是在同一种字体下，不同风格的具体字体的集合。打个通俗的比喻，我们知道楷书下有不同风格的字体，比如燕体、柳体、瘦金体等，这些都是不同风格的具体字体。不过都属于斜体，只是具体细节不同罢了。这里的斜体可以看作是一个独立的字体家族。S2接下来，CSS预定义了5种通用字体族Serif字体：带装饰性衬线（装饰线），字符成正比（宽度不一致）；Sans-serif字体：没有衬线，字符是成比例的；等宽字体：每个字符宽度相同的字体，通常用于代码清单；草书字体：模拟人类手写的字体，笔画流畅、连贯；奇幻字体：装饰各种“夸张”的字体S3定义字体族的方法使用font-family属性来定义字体族A1可以指定一个通用的字体族；A2可以指定特定的字体系列，注意当客户端没有特定的字体系列时，浏览器会使用默认的字体显示；因此，最好的办法是将特定字体名称与通用字体系列结合起来，以达到平滑降级的原则。引号声明字体，如以下代码示例所示：p{font-family:"TrebuchetMS",Verdana,sans-serif;Web安全字体有关Web安全字体的概念，请参阅MDNBasicTextandFontStyles；2.2FontBoldS1首先介绍字体加粗属性font-weightA1值是关键字/100~900的整数值，一般来说，400≈normal/700≈bold，数值加粗的原理见CSS权威指南P109了解详情。一般可以直接用值试试A2有继承S2bolder/lighter属性值的原则A1决定了从父元素继承的font-weight值；A2选择比继承的font-weightLevel值+最小值对应值更粗的一个；A3如果继承的font-weight值已经是最大值900/最小值100，那么bolder/lighter的值保持不变2.3字体大小S1首先引入字体大小属性font-sizeA1的值可以是keyword/length/percentage/em/rem关键字：实际开发中很少用到em/percentage：根据父元素的字体大小计算，1em=当前元素的父元素上设置的字体大小因为继承，可能会导致不受控制的缩放，例如：一个祖先元素：12px；B父元素：120%，即12*1.2=14.4px（可能四舍五入）；C子元素：135%，即14.4*1.35=19.44pxrem：1rem等于HTML中的根元素推荐使用A2有继承S2定义了一个重要的概念：A1每个字体的字符设计大小为一般等于或小于其模板框的em框大小；A2font-size的作用是设置给定字体的embox简而言之，font-size负责模具的大小，而不是实际字符的大小2.4字体样式和变形S1字体样式属性font-styleA1取值可以是normal/italic/oblique（通常两者效果一样，都是斜体）S2字体变体属性font-variantA1取值可以是small-caps，用于创建小写大写字母文本（参见CSS权威指南P124具体效果）S3fontStretch属性font-stretch，理解一下S4字体大小调整属性font-size-adjust，理解一下-variant（可交换顺序）+font-sieze+font-familyA2值也可以是line-height（不建议合并写法，不利于维护）A3值也可以是caption/icon/menu等系统字体设置，可以创建与默认操作系统相同的字体效果（见P131）S2特别注意，所有未明确分配的字体值将被浏览器自动赋予默认值2.6字体匹配过程S1了解具体过程即可，见P132-133三、文本属性3.1缩进和水平对齐S1文本缩进属性text-indentA1取值可以是length/em/百分比（相对于包含块的宽度值）其中该值的长度可以为负值，从而产生“悬挂缩进的效果”A2适用于块级元素，但不能适用于行内元素&替换元素（如果要内联元素的缩进效果，可以使用左内边距/外边距）A3Indentationisonlyappliedtoablocklevel元素第一行内容A4继承S2文本水平对齐属性text-alignA1取值可以是left/center/right/justify其中justify表示两端对齐文本（P140）A2应用于块级元素A3有继承3.2行高S1是什么行-height属性A1指的是文本行之间的最小基线距离，换句话说，文本行之间的距离可能大于line-height值A2行间距=行高值-字体大小值S2如何理解高度内联元素的大小是确定的（不是绝对准确，只是近似）A1font-size值，决定了内容区域的大小；A2line-height值，决定行内框的高度；A3行框（从最高行框的顶部到最低行框的底部），决定了一个行内元素的高度。S3属性特征A1值可能是length/em/number/normalnormal值，通常是字体大小的1.2倍（font-size*1.2）em/百分比，相对于元素字体的Size（注意不是字体父元素的大小，只有没有显式继承该元素的fz会按照fz继承向上查找）A2可以适用于所有元素（块级元素和内联元素的区别见其他博文）A3是可以继承的因为继承，可能有以下几种情况：被继承的div元素的line-height值小于显式设置的fz值，导致拥塞解决方法是用number作为“继承因子”，所以每个元素都会根据它的fz值height值来计算line-height值）A2适用于行内元素和替换元素（图片/表格等）A3不能继承A4注意所有垂直对齐的元素都会影响ect行高，换句话说，一行元素的行高会包含垂直对齐的高度元素;无基线）这导致因此，图像底部可能存在空白A3百分比/em对齐会增加/减少内联元素的基线/被替换元素的底边相对于父元素的基线S3居中对齐A1为中间值,指的是：一个元素的行内框的中点与其父元素基线上方0.5ex的点对齐；S4top/bottomalignmentA1为bottom值，指的是：一个元素的inlinebox的底部和它所属的linebox的底部Alignment；A2text-bottom的取值指的是：行内元素的行内文本内容区域的对齐方式+对替换元素无效适用于所有元素A3是用来修饰字间距的，可以理解（见P152)3.5文本变换S1text-transformA1value可以是大写等关键字A2适用于所有元素对于所有元素A3不能继承，但可以覆盖下划线样式(P158)3.7文本阴影S1文本阴影属性text-shadowA1值可以是颜色+右偏移长度+下偏移长度+[模糊半径]A2适用于所有ElementA3不能继承S2，可以实现多重阴影3.8其他S1文本空白和换行属性white-spaceA1值可以是pre/nowrap/pre-wrap/pre-line取值为pre时：保留HTML内容中的空格取值为nowrap：防止元素内文本换行A2适用于所有元素A3不可继承A4具体见P162表4.参考文献1CSSDefinitiveGuide；2MDN基础文本和字体样式；3CSS文本；4种CSS字体；
