CSS笔记之字体和文本属性

ps:最近有些懒散了呢，15年了加油，加油！

第5章 字体

Times实际上是一个字体系列（font family）,而不只是单个的字体

除了各种特定字体系列外（如Times、Verdana、Helvetica或Arial），css还定义了5种通用字体系列：

1）Serif字体

这些字体成比例（如果字体中的所有字符根据其不同大小有不同的宽度，则称改字体是成比例的），而且有上下短线。serif字体的例子包括Times、Georgia和New Century Schoolbook

2)Sans-serif字体

这些字体是成比例的，而且没有上下短线

例子包括Helvetica、Geneva、Verdana、Arial和Univers

3)Monospace字体

不成比例，每个字符宽度都完全相同，可能有上下短线，也可能没有

通常用于模拟打字机打出的文本、老式点阵打印机的输出，甚至更老式的视频显示终端。

例子包括Courier、Courier New和Andale Mono.

4)Cursive字体

这些字体试图模仿人的手写体。

例子包括：Zapf Chancery、Author和Comic Sans

5）Fantasy字体

这些字体无法用任何特征来定义，而且我们无法很轻易地将其划归到任何一种其他的字体系列中。

（是否可以理解除上述4中字体之外的字体，基本上可归类到Fantasy字体中）

字体包括Western、Woodblock和Klingon

使用通用字体系列

属性font-family 

eg body {font-family : sans-serif;}//用户代理会从sans-serif字体系列中选择一个字体，将其应用到body元素。由于继承，字体还会应用到body元素中包含的所有元素，如果有高级别的选择器将其覆盖则例外。

eg h1 {font-family : Georgia, serif;}//用户代理首先使用Georgia字体，如果Georgia字体不可用，则可以使用serif字体代替

使用引号

当一个字体名中有一个或多个空格（eg New York），或者字体名包括# 或$之类符号，需要在font-family声明中加引号

eg h2 {font-family : Wedgie, 'Karrank%', Klingon,  fantasy;}

注意双引号中不能再套双引号，应改为单引号代替，否则与属性语法冲突

字体加粗

使用font-weight属性，值有很多：normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

加粗如何起作用

第一次表示没太看明白。。。

定义了9级加粗度，100对应最细的字体变形，900对应最粗的字体变形。

一般地，400定义为等价于normal,700对应bold.

如果有一个字体变形标为Normal、Regular、Roman或Book，就会为之指定400，而标为Medium的变形会指定为500.不过，如果一个标为Medium的变形是唯一可用的变形，它不会指定为500而会是400

字体大小

font-size

有两个相对大小关键字：larger和smaller

绝对大小，有7个绝对大小值：xx-samll、x-small、small、medium、large、x-large、xx-large

相对大小，不同于加粗的相对值，相对大小之不必限制在绝对大小范围内。一个字体可以超过xx-samll和xx-large的大小

百分数和大小，百分数值总是根据从父元素继承的大小来计算。对计算的字体大小有更精细的限制。

字体大小和继承，css中font-size是可以继承的，不过继承的是计算值而不是百分数，而且与相对大小关键字一样，百分数可以积累。

使用长度单位，以下font-size声明都是等价的：

p.one {font-size : 36pt;}

p.two {font-size : 3pc;}

p.three {font-size : 0.5in;}

p.four {font-size : 1.27cm;}

p.five {font-size : 12.7mm;}

风格和变形

有风格的字体

font-style  值 italic(斜体) |  oblique（倾斜） | normal | inherit

字体变形

font-variant  值：small-caps(使用小型大写字母文本) | normal | inherit

拉伸和调整字体

这两个属性已冻css2.1中去除，因为还没有任何一个浏览器实现这两个属性

font-stretch  拉伸字体

font-size-adjust 调整字体大小

font属性

将所有内容都合并到一个属性中：font属性，它是涵盖所有其他字体属性（以及少数其他内容）的一个简写属性    值[ [<font-style> || <font-variant> || <font-weight>] ?  <font-size> [/<line-height>] ? <font-family>] 

前3个属性font-style、font-variant和font-weight三个属性值可以按照任意顺序来写，如果某个属性值为normal,则可以忽略不写。而font-size和font-family不仅以此顺序作为声明中的最后两个值，而且font声明中必须有这两个值。

增加行高  line-height,可以作为对font-size值得一个补充，并用一个斜线（/）与之分隔

eg.  h2 {font: bold italic 200%/1.2 Verdana, Helvetica, Arial, sans-serif;}

使用系统字体

如果希望一个Web页面结合用户操作系统的设置，那么font的系统字体值会很方便。这些值用于取得操作系统中元素的字体大小、字体系列、字体加粗、字体风格和字体变形，并将其应用到一个元素。这些值如下：

caption  用于有标题的控件，如按钮。

icon       用于对图标加标签

menu      用于菜单，即下啦菜单和菜单列表

message-box   用于对话框

small-caption   用于对小控件加标签

status-bar        用于窗口状态条

eg button {font : caption;}可以把一个按钮的字体设置为与操作系统中的按钮字体完全相同。

利用这些值，可以创建一个机遇Web的应用，使之看上去非常类似于用户操作系统自带的应用

注意：系统字体可能只能整体设置，也就是说：字体系列、大小、加粗、风格等等都要一起设置。不过，一旦已经设置了系统字体，就可以修改其中的单个值。

字体匹配

font-face规则

css2中引入了一种方法，可以通过@font-face规则对字体匹配有更多控制。但已从css2.1中去除。

第6章 文本属性

文本是内容，而字体用于显示这个内容。使用文本属性，可以控制文本相对于改行余下内容的位置、使其作为上标、加下划线，以及改变大小写等。甚至还可以有限地模拟打字机的Tab键的使用。

缩进和水平对齐

缩进文本  text-indent属性  值  <length> | <percentage> | inherit,此属性可以继承

通过使用text-indent属性，所有元素的第一行都可以缩进一个给定长度，甚至该长度可以是负值

p {text-indent : 3em;}这个规则会使所有段落的首行缩进3em

可以为所有块级元素应用text-indent,但无法将这个属性应用到行内元素(如果想把一个行内元素的第一行"缩进"，可以用左内边距或外边距创造这种效果)，图像之类的替换元素上也无法应用text-indent属性。

悬挂缩进： p {text-indent : -4em;}注意：首行缩进的字可能会超出浏览器窗口的左边界，为了避免，可以对负缩进再设置一个外边距或一些内边距：p {text-indent : -4em; padding-left : 4em;}

水平对齐  text-align  值： left | center | right | justify | inherit

垂直对齐

行高： line-height  值： <length> | <percentage> | <number> | normal | inherit

要确定一个给定元素的行间距，只需将line-height的计算值减去font-size的计算值。这个值是总的行间距。而且这可能是一个负值。然后行间距再除2，将行间距的一半分别应用到内容区的顶部和底部，其结果就是该元素的行内框。

指定line-height值。

如果使用默认值normal,用户代理必须计算行间的垂直空间。不同的用户代理计算出的值可能不同，不过通常都是字体大小的1.2倍，这使得行框要高于给定元素的font-size值

行高和继承

看下面例子

body {font-size : 10px;}

div {line-height : 1em;}/*computes to '10px'*/

p {font-size : 18px;}

解决办法：设置缩放因子，将上面第2个样式改为div {line-height : 1;}

垂直对齐文本

vertical-align  属性只应用于行内元素和替换元素，如图像和表单输入元素。 此属性不能被继承

值 ： baseline(基线) | sub(下标) | super(上标) | top | text-top | middle | bottom(底端对齐) | text-bottom | <percentage> | <length>（长度对齐）

字间隔和字母间隔

字间隔  word-spacing  值： <length> | normal | inherit 

word-spacing属性接受一个正长度值或负长度值

字母间隔 letter-spacing  值：<length> | normal | inherit   可以使用letter-spacing来突出强调效果。

文本转换

text-transform  值：uppercase(全大写) | lowercase(全小写) | capitalize(首字母大写) | none | inherit

文本装饰

text-decoration  值： none | [underline(下划线) || overline(文本顶端上划线) || line-through(文本中间贯穿线) || blink(让文本闪烁)] | inherit     此属性不能被继承

文本阴影

text-shadow  值：none | [<color> || <length><length><length>? , ]* [<color> || <length><length><length>? ] | inherit

前两个长度值确定了阴影与文本的偏移距离，第三个长度值可选，定义了阴影的“模糊半径”

eg.定义一个相对于文本向右偏移5像素向下偏移0.5em的绿色阴影，而且不模糊。可以写作：

text-shadow : green 5px 0.5em;

负长度值会使阴影落在原文本的左上方。

处理空白符

white-space 值:normal | nowrap(防止元素中的文本换行，除非使用了一个br元素) | pre(保留标记中的空格) | pre-wrap | pre-line | inherit  它会把所有空白符合并为一个空格

总结：

值            空白符    换行符       自动换行 

pre-line      合并       保留          允许  

normal        合并       忽略          允许

nowrap        合并       忽略          不允许 

pre           保留       保留          不允许

per-wrap      保留       保留          允许

文本方向

direction 值： ltr | rtl | inherit

浏览器可能会有以下内部规则： * ：lang(ar), *:lang(he) {direction:rtl;}//阿拉伯语和希伯来语Uni

Unicode有一种更健壮的方法来处理方向性。利用属性unicode-bidi  值：normal | embed | bidi-override | inherit