文本样式

1.段落

通过文本的属性,我们可以指定很多东西。颜色、字符间距、文本如何对齐、如何对文本做装饰等等。

让文字有不同颜色。

第一行缩进。text-indent 后面跟长度单位,em 指的是当前字体大小的倍数,1em 就是这个字有多宽,缩进这个宽度。若输入百分比为整个页面的百分比,与em相同为相对值。可输入绝对单位,如 in (英寸)、cm(厘米)、 mm(毫米)、 px(像素)、 pt(1/72英寸)。可以为负值。

悬挂缩进(第二行开始比第一行缩进)。如果只用 padding 效果为设定内边距。

指定行高。用 2 也是一样的。行高只看数字,为当前字体尺寸倍数。带单位的数据为绝对间距。normal 为正常行间距。

指定对齐方式。left / right / center / justify (两端对齐)

单词间空格(英文)。只看空格,中文无空格所以没有用。

字符间距。

转变字母大小写(英文)。uppercace(大写) / lowercase(小写) / capitalize(首字母大写)

文字装饰(主要指画线),可组合。

空白字符处理。normal(把连续空格和换行当作一个空格) / pre(有多少空格都承认,回车也承认,不自动卷绕) / pre-wrap(自动卷绕,承认空格回车) / nowrap(不卷绕) / pre-line(合并空白,保留换行) 。

文字书写方向。ltr rtl 仅最后一行句号放到前面。中英文不会改变文字方向。


2.字体

可以指定文字的很多东西:字体、文字大小、是否加粗、斜体、变形、装饰(阴影,轮廓)

font-family 指定字体有两种方式:指定字体系列,给出字体具体名称。

给出字体名称对于英文字体,不同操作系统、不同浏览器名字基本一样。中文字体名字可能不一样,需要测试。如果浏览器没有这种字体会用默认字体替换。这时可以加入多种备选字体。

font-family:Times,TimesNR,serif; Times为中英文默认字体,中文用宋体。


字体系列有 5 个通用系列:

serif 大多数英文字体,是一种矢量字体,线条有粗细,会等比例放大,会在竖线两端出现小横线。

sans-serif 它的竖线上下两端不出现横线。(如HI

monospace 指的是等宽的字,比如像用于写程序代码,表达终端输出,所有字宽度一样。

cursive 表示类似手写的字体。

fantasy 无法归类的,比如不是文字而是形状、符号的字体。


font-style:normal / italic / oblique

normal 不倾斜的

italic 字体厂家做好的斜体,斜体字

oblique 浏览器计算产生的斜体,倾斜的文字


font-variant:small-caps; 小的大写字母,比正常的大写字母小一号,但所有字母都是大写。

font-weight:bold; 加粗。可以给100-900间的数字。

font-size:2em; 把字体变大或变小。也可用绝对值单位,但不是所有浏览器都支持。


3.效果

text-shadow:3px 5px 5px rgba(0,255,0,0.5);

阴影。4个参数,第一参数 3px 表示阴影在 x 方向距离字延伸多少,5px 表示往下延伸5个像素,5px 表示阴影模糊范围,rgba 为字体颜色。

阴影可以有很多变化方式,最终靠你自己调配这4个值可以做出很多效果。阴影可以有很多块。

outline-color:red;outline-style:solid;outline-width:thin;

轮廓必须给出颜色和线形。最后的宽度可用数字表示像素。

你可能感兴趣的:(文本样式)