CSS#4：字体与文本

e.g.

在一个宽为400像素的元素中，其包含的文本缩进为5%，也就是20像素。假设其子元素的宽为200像素，它会继承这个缩进，但缩进值并不是200×5%，而仍然是20像素。这样可以确保无论像素有多宽，他们的缩进距离都一样。

如果在子元素上重新设定text-indent的值，可以覆盖继承的值。

CSS会把文本放在一个只有开头和末尾是封闭着的不可见的盒子里。这个盒子会因为折行而断开。所以我们缩进的其实是这个文本盒子的起点位置。也就是说，文本属性只能应用于这个文本盒子，而不是包含元素的盒子。

小tips

如果想缩进整个段落，可以使用段落的margin-left属性，使整个包含盒子向右移动。
在设定缩进和外边距时要使用em，使字体长度能成比例变化。

2.2 字符间距（letter-spacing）

正号：增大
负号：减小

一定要用相对单位，以便字符间距能随大小同比例变化。

控制字距（letter-spacing）：控制文本块中所有字符之间的间距
紧排（keming）：只调整两个字符的间距

小tips

letter-spacing对英文、汉字以及其他字符都起作用。
它的值是在浏览器默认值的基础上增加或减少。
缩小大标题的字距可以让网页显得更专业。
过小的间距可能会导致字符交错。

2.3 单词间距（word-spacing）

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

CSS把任何两边有空白的字符和字符串都视作“单词”。

小tips

纯汉字文本一段之中没有空格，因此word-spacing对中文网页几乎没有用，但对中英混排段落可能有用。
在加宽字距的基础上加上一点单词间距效果会很好

2.4 文本装饰（text-decoration）

underline 下划线
overline 上划线
line-through 划掉
blink 布灵布灵（很讨厌！）
none 无

小tip

慎用下划线。因为链接的文本通常都是下划线，非链接的下划线文本容易导致困惑和无效点击。

不过，在鼠标悬停状态下加上下划线是一种有效的视觉反馈。

2.5 文本对齐（text-align）

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

2.6 行高（line-height）

特点

不用指定单位

对于类似标题的一行文本来说，line-height增加的空白就像外边距一样，标题往往有默认行高。

小tip

在内外边距都去掉的情况下，文本上下依然留有空白。如果想去掉这些空白，可以把文本的行高设定为比字体高度更小、比如说小于1的值。

运用复合值的形式把font-size和line-height写在一起

div#intro {font:1.2em/1.4 helvetica, arial, sans-serif;}

行高是字体大小1.2em的1.4倍。

注意：设定行高时如果使用了绝对单位，将来增大字体有可能导致行与行之间的重叠。

2.7 文本转换（text-transform）

uppercase 大写
lowercase 小写
capitalize 首字母大写
none 无

小tip

加上font-variant: small-caps声明可以实现小型大写字母的首字母放大效果

2.8 垂直对齐（vertical-align）

特点

只影响行内元素

对于块级元素，必须把其display属性设置为inline。

该属性最常用于公式或化学分子式的上标和下标。

正值：向上
负值：向下

3. Web字体

3.1 公共字体库

步骤

打开http://www.google.com/webfonts
找到想要的字体，单击Add to Collection按钮。
单击页面底部的Use按钮。
把生成的<link>标签复制粘贴到页面的<head>标签中。

一行代码可以链接多款字体。

3.2 @font-face包

以这种方式提供的字体，会在使用该字体的页面第一次加载时被浏览器下载并缓存起来，以后就不用下载了。

但是，除了显示网页之外，用户不能将这种字体用于其他用途。

Font Squirrel（http://www.fontsquirrel.com）

提供了很多现成的字体包，每个字体包中都包含所有必要格式的字体和为每款浏览器提供正确格式的CSS代码。
有一个转换程序，能够把你上传的字体转换成字体包。

把代码添加到网页中之后，就可以使用font-family以常规方式引用该字体了。引用字体时要使用@font-face规则中font-family属性的值作为字体族的名字。

4 网页排版

一个简单又基础的步骤

去除所有元素的默认外边距
设置主字体族和字体大小（不要忘了用em）
安排元素间的垂直距离（注意叠加外边距）
对元素间的距离和不同文本的大小进行调整

html实体标点符号

&ldquo 左双引号“
&rdquo 右双引号”
&hellip 省略号……
&mdash 破折号——
&amp 和号&
&lt 小于号

小tips

line-height会平均分布在文本上下
可以把网格图片暂时设为背景以做到基于网格排版，使网页布局更加规范
基于网格排版时要把行高设定为网格两条线之间的距离
不同标题拥有不同的偏移位置，注意进行调整
如果你想在伪元素中添加十六进制值，则需要在数字前面加一个反斜杠

排版上一些特殊的行内元素

1) q

默认样式是在文本开头和末尾加上引号

2) span

为构造首字下沉效果，首字母都会被包含在该元素里。然而，这种做法对于从内容管理系统中动态取文本的网页并不适用。

首字下沉

紧邻同胞选择符+
::first-letter伪元素

小tips

把首字母的line-height设定为小于1的值，可以使元素盒子紧紧包住首字母，从而不会强迫其他的段落行绕排首字母。
使用::first-line伪元素而不是额外加标签，好处在于当行的长度改变时，大写字母的效果会随之拓展。
要想保证只有某个段落后的那个段落才会缩进，要使用紧邻同胞选择符+。

注意：

使用::before和::after的伪元素给引用内容添加引号时使用的是十六进制，在这里不能给content属性设定常规的Html实体，只能使用改写后的十六进制实体值。

魔法电子猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS#4：字体与文本

在一个宽为400像素的元素中，其包含的文本缩进为5%，也就是20像素。使用::before和::after的伪元素给引用内容添加引号时使用的是十六进制，在这里不能给content属性设定常规的Html实体，只能使用改写后的十六进制实体值。时，就等于把基准大小从16像素改为10像素（16×62.5%=10），这样就能做到1em = 10px，能实现既使用em，又能设定具体的像素大小。用相对单位设置元素的font-size的情况下，该元素的字体大小要相对于最近的“被设定过字体大小”的祖先元素来确定。
复制链接

扫一扫