CSS之文本与字体

建议学习时长： 30分钟
学习方式：深入

学习目标

知道文本与字体的样式的设置

详细介绍

font-family

指定字体名称。字体名称之间用逗号分割。浏览器会使用第一个认识的字体。如


font-family: Georgia, "Times New Roman",
             "Microsoft YaHei", "微软雅黑",
             STXihei, "华文细黑",
             serif;

font-size

指定字体大小。如

p{
  font-size: 14px;
}
p small{
  font-size: 80%;
}

color

指定文字的颜色。可选值见这里

line-height

指定行高。如

p{
  line-height: 1.1em;
}
div{
  line-height: 24px;
}

font-weight

指定字的粗细。可选值为

inherit
normal
bolder（更粗）
bold（粗）
lighter（细）
100,200,300,400,500,600,700,800,900（值越大越粗，没有单位）

font-style

属性指定字体的风格。可选值

normal(默认值)
italic 用字体的斜体属性
oblique 让字体倾斜
inherit 从父元素继承字体样式

所有主流浏览器都支持 font-style 属性。
任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"

italic 与 oblique的区别

一种字体有粗体、斜体、下划线、删除线等诸多属性。但是并不是所有字体都做了这些，一些不常用的字体，或许就只有个正常体，如果你用 italic，就没有效果了~这时候你就要用Oblique。
换种说法：italic 是指斜体字，而Oblique是让文字倾斜。对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果。对于有斜体属性的字，使用italic和oblique是一样的。

font

font由 font-style, font-variant, font-weight, font-size, line-height and font-family组成。
如

font: italic bold 1.5em/2 arial, Helvetica, sans-serif;

text-align

指定元素内文本的水平对齐方式。可选值

left 左对齐
right 右对齐
center 居中对齐
justify 两端对齐

text-indent

指定缩进。如，段落缩进两个字符

p{
  text-indent: 2em;
}

隐藏文字可以用

.hide-text{
  text-indent: -99999px;
}

text-decoration

对文本进行修饰。可选值

none
underline 下划线
overline 上划线
line-through 中划线

text-overflow

指定文本超过元素大小时候的处理方式。
单行文本溢出加省略号

white-space: nowrap;/* 必须要设置这个 */
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;

vertical-align

用于垂直对齐inline元素，也就是display值为inline和inline-block的元素。这个属性比较复杂，见

white-space

指定元素的内容中有空格时如何处理。
比较多的用法是，当元素内容中没用空格时，禁止部分内容换行。

white-space: nowrap;

其他一些字体样式规则

font-stretch 对字进行进行伸缩变形
@font-face 定义字体
text-transform 控制文本的大小写
text-shadow 控制文本阴影效果
font-variant 指定是否把小写字母转化成字号变小的大写字母

生效规则

优先使用排在前面的字体。
如果找不到该种字体，或者该种字体不包括所要渲染的文字，则使用下一种字体。
如果所列出的字体，都无法满足需要，则操作系统自行决定使用哪种字体。

使用注意点

绝大部分中文字体里包含英文字母（基本上都很丑），而英文字体是不包含中文字符的。因此 font-family 应该优先指定英文字体，然后再指定中文字体。否则，中文字体所包含的英文字母，会取代英文字体，而这往往很丑的。
把 Mac 支持的字体放在 Windows 前面。因为有一部分Mac用户装了Windows 下的常用字体（这得归功于 Office for Mac），但极少的Windows 用户装了Mac的常用字体。
为了保证兼容性，中文字体的中文名称和英文名称，应该都写入font-family。比如，"微软雅黑"的英文名称是Microsoft YaHei。
如果字体名称中间有空格，则要用双引号把字体名称包起来。如 "Microsoft Yahei"。