css 知识点整理 02 字体

2016-02-01

基础理论-W3C-css

字体属性

文本属性

*字体匹配

参考：
《CSS权威指南》（主要讲解了CSS2和CSS2.1）

字体属性

`font-family` 字体系列

通用字体系列 `generic-family`

sefir 衬线
sans-seirf 无衬线
cursive 手写体
monospace 等宽
fantasy 上述之外的，无法定义的字体

`font-weight` 字体加粗

值：normal bold bolder lighter
数字：100 200 300 400 500 600 700 800 900
- 数字不对应固定宽度，而是映射一个范围

`font-size` 字体大小

font-size不一定直接对应显示字符的大小，而是定义了包裹字符的em框的大小。汉字是等宽字体所以基本不会有太大影响。
值：
- 百分数：
  - 总是从父元素处继承
  - 1em = 100%
- 长度单位（px em rem vh 等）

`font-style` 字体风格

italic oblique normal inherit

`font-variant` 字体变形

small-caps normal inherit

small-caps有点类似于text-transform: uppercase，只不过做了大小缩放

`font-stretch` 字体拉伸

normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded inherit

`font-size-adjust` 字体调整(提高辨识度)

<number> none inherit

方面值：x-height与font-size的比值
- 方面值与字体辨识度成正相关
主要用于西文字体

`font` 缩写属性

font: [ font-style || font-variant || font-weight || font-stretch ]? font-size [/line-height]? font-family

属性关键字参考张鑫旭的CSS font关键字属性值的简单研究

使用系统字体：用于取得用户操作系统中的字体大小，字体系列，字体加粗，字体风格等
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
关键字只能独立使用，如果与在font属性中与其他属性并列，则会被认为是候选字体系列
应用场景：使不同的平台上的字体显示效果最好。如ios不支持微软雅黑，可以使用font：关键字直接显示默认的显示效果最好的汉字字体

文本属性

间距、间隔

`line-height` 行高

行高的继承
- 使用em或者百分比嵌套子元素时，行高会计算父元素的字体大小，子元素会应用此计算值作为行高
  1
  2
  3
  outter {font-size: 10px;}
  wrap {line-height: 1em;} /* computers to 10px */
  inner {font-size: 16px;}
- 如果使用数值，则会应用继承值（即根据自身的字体大小进行调整）

行框 & 行内框

设置行内元素的padding、border和margin并不会撑大外层元素的高度

基线、底线、顶线：
- 顶线，底线，中线：以实际字符的顶部、底部、中部来进行比较
- 基线：字母x的底部对应的水平线
行高、行距：
- 行高：两条基线之间的垂直距离，也就是line-height的高度
- 行距（行间距）：上一条底线与下一条顶线之间的垂直距离，即line-height 与 font-size之间的差值
内容区：
- 内容区：顶线与底线之间的部分
行内框：
- 行内框：行间距除以2，在font-size上下各占据相应的部分，这个区域就是行内框
行框：
- 行框：即本行文本内所有元素行高最大的值

`letter-spacing` 字间隔

`word-spacing` 字母间隔

对齐方式

`text-align` 水平对齐

left center right justify justify-all

text-align： justify仅对文本换行时生效，即一段连续的文字呈两行显示，第一行充满整行，第二行只占据一半，则仅有第一行能实现分散对齐
justify-all 兼容性不强
- Same as justify, but also forces the last line to be justified.

`text-justify` 分散对齐

`vertical-align` 垂直对齐

top middle bottom baseline text-top text-bottom sub super <persontage> <lengh>

要求设置在元素本身，即设置在包含元素上时，包含元素内的子元素文本不会发生改变
直接设置数值，是计算该元素的line-height的百分数

`text-indent` 文本缩进

百分比：相对于父元素的宽度
text-indent有继承性

文本转换

`text-transform` 大小写转化

uppercase lowercase capitalize none inherit

capitalize 只会将首字母大写，其他部分不会转化为小写或者进行别的转化

文本修饰

`text-decoration` 文本装饰

不支持继承

`text-shadow` 文本阴影

[<color> || <length> <length> <length>?,]* [<color> || <length> <length> <length>?]*

文本溢出

`text-overflow`

clip ellipsis

设置行末出现省略号（文本仅一行）

p {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

格式处理

`white-space`

值	空白符	换行符	自动换行
normal	合并	忽略	允许
nowrap	合并	忽略	不允许
pre	保留	保留	不允许
pre-line	合并	保留	允许
pre-wrap	保留	保留	允许

`word-wrap` 词换行

break-word
- 表示如果行内没有多余的地方容纳该单词到结尾，则哪些正常的不能被被分割的单词会被强制分割换行。一般用于长单词的强制换行
word-wrap 属性原本属于微软的一个私有属性，在CSS3现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法

`word-break` 断词

break-all
- 对于non-CJK (中文/日文/韩文) 文本，可在任意字符间断行
- Word breaks may be inserted between any character for non-CJK (Chinese/Japanese/Korean) text
kepp-all
- CJK 文本不断行。 Non-CJK 文本表现同 normal

文本方向

`direction`

ltr rtl inherit

默认对块级元素中的文本生效，作用于行内文本需要设置unicode-bidi为embed或者bidi-override

文本颜色

`color`

字体匹配

匹配规则

用户代理创建/或访问一个字体属性数据库，列出了用户电脑和用户代理具有的所有字体具备所有CSS属性
用户代理根据字体属性列表，按照font-style font-variant font-weight font-size进行匹配
如果第二部没有匹配到字体，则进行下一个候选字体的匹配
如果没有正确匹配且候选字体都尝试过之后，用户代理将使用默认字体

font-face规则

声明一个远程字体下载

@font-face {
    font-family: "Example New";
    src: url(http://www.example/com);
}

字体属性

font-family 字体系列

通用字体系列 generic-family

font-weight 字体加粗

font-size 字体大小

font-style 字体风格

font-variant 字体变形

font-stretch 字体拉伸

font-size-adjust 字体调整(提高辨识度)

font 缩写属性