CSS设计指南 笔记4

CSS设计指南 笔记4

4 字体和文本

4.1 字体

网页字体来源

• 用户机器中安装的字体
• 保存至第三方网站上的字体
  • 可以使用link标签链接到页面
• 保存在web服务器上的字体
  • 可以用@font-face规则随网页一起发送给浏览器

字体可以分为不同类别（衬线字体、无衬线字体、等宽字体），每类字体可以分成不同的字体族，字体族中又可以包含不同的字型

字体样式相关属性

• font-family
• font-size
• font-style
• font-weight
• font-variant
• font（简写属性）

4.1.1 字体族

h2 {
    font-family: times, serif;
}

font-family用于设定元素中的文本使用什么字体，是可以继承的元素，值不区分大小写

字体栈

• 指定文本的字体时，多列出几种后备字体
• 给最后一项指定一个通用字体类
  • serif（衬线字体）
  • sans-serif（无衬线字体）
  • monospace（等宽字体）
  • cursive（草书体、手写体）
  • fantasy（不能归入其他类别的字体）
• “x高度”

4.1.2 字体大小

h2 {
    font-size: 18px;
}

浏览器样式表默认为每个HTML元素都设定了font-size（相对单位em）

• 修改body元素的字体大小不会影响页面中以绝对单位控制的元素，但没有设定字体大小的元素则会于body的字体大小成比例变化

字体大小在标记层次中是可继承的

单位

• 绝对单位：像素、点、关键字值（x-small、medium、x-large）
• 相对单位：百分比、em、rm（根元素的字体大小）
  • 相对于最近的“被设定过字体大小的“祖先元素来确定
  • 可以使用相对字体大小，自动调整各层元素

rem

• 相对HTML根元素
• 既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应
• 除IE8及更早版本外，所有浏览器均已支持

4.1.3 字体样式

h2 {
    font-style: italic;
}

设定字体是斜体还是整体

英文中斜体主要表示强调

• 可以用<em>标签，默认是斜体

4.1.4 字体粗细

h2 {
    font-weight: bold;
}

最好只是用bold和normal两个值

• 浏览器对数字值的实现各不相同，所以从常规字体到粗体的切换可能发生在不同的数值上（通常是400左右）

粗体的主要作用是表示重要

• 可以用<strong>标签，默认是粗体

4.1.5 字体变化

blockquote {
    font-variant: small-caps;
}

值：normal、small-caps（所有小写字母变成大写字母）

对英文来说慎用

• 大写字母不像小写字母有上伸部分和下伸部分作为视觉提示，会增加辨识难度

4.1.6 简写字体属性

p {
    font: bold italic small-caps .9em helvetica, arial, sans-serif;
}

两条规则

• 必须声明font-size和font-family的值
• 值必须按如下顺序声明
  • font-weight、font-style、font-variant不分先后
  • font-size
  • font-family

在设定font-size时可以顺便设定line-height（行高）

​ 12px/1.5

4.2 文本属性

一些排版效果

4.2.1 文本缩进

p {
    text-indent: 3em;
}

设定行内盒子相对于包含元素的起点

值：长度值（正、负均可）

text-indent可以被子元素继承

4.2.2 字符间距

p {
    letter-spacing: .2em;
}

控制字距：文本块中所有字符之间的间距

值：长度值（正、负均可）

• 正：增大字符间距
• 负：缩小字符间距

4.2.3 单词间距

p {
    word-spacing: .2em;
}

只调整单词间距，不影响字符间距

单词：任何左右两边有空白的字符和字符串

4.2.4 文本装饰

p {
    text-decoration: line-through;
}

值：underline、overline、line-through、blink（闪烁效果）、none

4.2.5 文本对齐

p {
    text-align: right;
}

值：left、right、center、justify（两端对齐）

控制文本在水平方向对弃的方式

center也可以用来在较大元素中居中较小的固定宽度的元素或图片

4.2.6 行高

p {
    line-height: 1.5;
}

值：任何数字值（不用指定单位，字体大小的x倍）

在文本行之间增加间距，平均分布在一行文本的上方和下方，行高是不叠加的

4.2.7 文本转换

p {
    text-transform: capitalize;
}

值：none、uppercase、lowercase、capitalize

用于转换元素中文本的大小写

在CSS中，“of”，“as”这类词的首字母也会大写

4.2.8 垂直对齐

span {
    vertical-align: 60%;
}

值：任意长度值、sub、super、top、middle、bottom

以基线为参照上下移动文本

• 只影响行内元素
• 上标、下标、脚注的角标

标签<sub>、<sup>

4.3 Web字体大揭秘

使用@font-face规则在网页中嵌入可下载字体

4.3.1 公共字体库

可以使用link标签将字体链接到页面

4.3.2 打包的@font-face包

会在使用该字体的页面第一次被加载时被浏览器下载并缓存起来

问题：不同浏览器要求的字体格式不一样

4.3.3 生成@font-face包