CSS（2）

字体和文本样式

先来看看基础文本和字体样式，其实大多数我们都在作业或者线下体验课中用过，先列出来一些重要的属性吧

font

值	描述
font-style	规定字体样式
font-variant	规定字体异体
font-weight	规定字体粗细
font-size/line-height	规定字体尺寸和行高
font-family	规定字体系列
caption	定义被标题控件（例如按钮，下拉列表等）使用的字体
icon	定义被图标标记使用的字体
menu	定义被下拉列表使用的字体
message-box	定义被对话框使用的字体
small-caption	caption字体的小型版本
status-bar	定义被窗口状态栏使用的字体

font是一个简写属性，用于一次设置字体的两个或更多方面。

使用icon等关键字可以适当地设置元素的字体，使之与用户计算机环境中的某个方面一致。如果没有使用这些关键词，至少要指定字体大小和字体系列。

可以按顺序设置如下属性：

font-style
font-variant
font-weight
font-size/line-height
font-family

可以不设置其中的某个值，未设置的属性会使用其默认值。

font-family

值	描述
family-name ,generic-family	用于某个元素的字体族名称或/及类族名称的一个优先表。默认值取决于浏览器。
inherit	规定应该从父元素继承字体系列。

在使用font-family时，可以一次规定多个系列，当前一个字体系列不可使用时，系统会自动降级为后一个系列，以此类推直到找到可用的系列。

font-size

值	描述
xx-small x-small small medium large x-large xx-large	将字体的尺寸设置为不同的尺寸，从xx-small到xx-large
smaller	将font-size设置为比父元素更小的尺寸
larger	将font-size设置为比父元素更大的尺寸
length	将font-size设置为一个固定值
%	将font-size设置为基于父元素font-size大小的一个百分比的值
inherit	规定从父元素继承字体尺寸

font-style

值	描述
normal	默认值
italic	斜体字体样式
oblique	倾斜的字体样式
inherit	从父元素继承字体样式

对于italic和oblique，都是倾斜字体，但是oblique是使原本没有倾斜的字体变得倾斜，而italic本就指的是斜体字。（对于某些不常用的字体没有italic效果，这时就要用到oblique了~）

color

这个不用多讲，就是字体的颜色。

font-weight

值	描述
normal	标准的字符，默认值
bold	粗体字符
bolder	更粗的字符
lighter	更细的字符。
100 200 300 400 500 600 700 800 900	定义由粗到细的字符，400等同于normal，700等同于bold
inherit	规定从父元素继承字体的粗细。

这个也蛮好理解的，不多解释了。

letter-spacing（字符间距）

值	描述
normal	默认值，规定字符间没有额外的空间。
length	定义字符间的固定空间（可以使用负值）
inherit	从父元素继承字符间距属性值

这个用的时候知道length可以设置为负的，靠的更近就好了。

word-spacing（字间距）

字符和字到底有什么区别？

CSS 把“字（word）”定义为任何非空白符字符组成的串，并由某种空白字符包围。

如何理解？

this is some text.

在这段文字中，每个空格就是分隔字（word）的分隔符。

但是呢，对于中文，例如以下

今天天气真好，你吃饭了吗？

你会发现，word-spacing属性对它一点用都没有。因为它没有空白来分开。

值	描述
normal	默认值。
length	定义字之间的固定空间（也可以是负的）
inherit	从父元素继承字间距属性值

line-height（行高）

值	描述
normal	默认值
number	设置数字，该数字会与当前字体尺寸相乘来设置行间距
length	设置固定的行间距
%	基于当前字体尺寸的百分比行间距
inherit	从父元素继承行高属性值

行高其实也没什么好说的。主要是记得number和百分比的属性值是根据当前字体尺寸的倍数或者百分比设置的就好。

text-align（文本对齐）

值	描述
left	文本居左对齐
right	文本居右对齐
center	文本居中对齐
justify	文本两端对齐
inherit	从父元素继承文本对齐属性值

justify的一些问题

值 justify 可以使文本的两端都对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。您也许已经注意到了，两端对齐文本在打印领域很常见。不过在 CSS 中，还需要多做些考虑。

要由用户代理（而不是 CSS）来确定两端对齐文本如何拉伸，以填满父元素左右边界之间的空间。例如，有些浏览器可能只在单词之间增加额外的空间，而另外一些浏览器可能会平均分布字母间的额外空间（不过 CSS 规范特别指出，如果 letter-spacing 属性指定为一个长度值，“用户代理不能进一步增加或减少字符间的空间”）。还有一些用户代理可能会减少某些行的空间，使文本挤得更紧密。所有这些做法都会影响元素的外观，甚至改变其高度，这取决于用户代理的对齐选择影响了多少文本行。

CSS 也没有指定应当如何处理连字符（注1）。大多数两端对齐文本都使用连字符将长单词分开放在两行上，从而缩小单词之间的间隔，改善文本行的外观。不过，由于 CSS 没有定义连字符行为，用户代理不太可能自动加连字符。因此，在 CSS 中，两端对齐文本看上去没有打印出来好看，特别是元素可能太窄，以至于每行只能放下几个单词。当然，使用窄设计元素是可以的，不过要当心相应的缺点。

注1：CSS 中没有说明如何处理连字符，因为不同的语言有不同的连字符规则。规范没有尝试去调和这样一些很可能不完备的规则，而是干脆不提这个问题。

text-shadow

先说说text-shadow语法，因为它是CSS3的新属性

text-shadow: h-shadow v-shadow blur color；

值	描述
h-shadow	必需，水平阴影的位置。允许负值。
v-shadow	必需，垂直阴影的位置。允许负值。
blur	可选，模糊的距离。
color	可选，阴影的颜色。

使用时，可以叠加多个text-shadow，以实现一些艺术字的效果。

text-decoration（文本装饰效果）

值	描述
none	默认，定义标准文本
underline	规定文本下划线
overline	定义文本上划线
line-through	定义穿过文本的一条线（删除线）
blink	定义闪烁的文本
inherit	定义从父元素继承文本装饰效果属性值

这个删除线，在HTML中是使用来实现的~。

行⑧，今天就总结这么多。明天再来总结后面的知识。

CSS之文本和字体样式。