CSS文本样式

字体总汇

设置字体大小。每个值从小到大的固定值。

xx-small

x-small

small

medium

large

x-large

xx-large

设置字体相对于父元素字体的大小

smaller

larger

数字+px使用CSS像素长度设置字体大小数字

+%使用相对于父元素字体的百分比大小

字体设置

font-size

p {

font-size:50px;

}

解释：设置文本的大小

先设置父元素字体大小

body{

font-size:50px;

}

再设置相对小一些

p{

font-size:smaller;

}

font-variant

normal表示如果以小型大写状态，让它恢复小写状态。

small-caps让小写字母以小型大写字母显示

body {

         font-size: 50px;

}

p{

font-variant:small-caps;

}

<p>这是html5</p>

解释：设置字体是否以小型大写字母显示。

先让父元素设置小型大写

body {

       font-size: 50px;

       font-variant: small-caps;

}

让子元素设置恢复小写

p{

font-variant:normal;

}

<p>这是html5</p>

font-style

p{

font-style:italic;

}

解释：设置字体是否倾斜

font-weight

p{ 

font-weight:bold;

}

解释：设置字体是否加粗。

font-family

p{

font-family:微软雅黑;

}

解释：使用指定字体名称。这里使用的字体是浏览者系统的字体。有时为了兼容很多浏览者系统的字体，可以做几个后备字体

备用字体

p{

font-family:楷体,微软雅黑,宋体;

}

解释：如果没有楷体，选择微软雅黑，如果没有微软雅黑，选择宋体

font

p{

font:50px 楷体;

}

/*font: small-caps  italic bold 50px 楷体 ;*/前三个顺序可以相互调整

解释：字体设置简写组合方式。格式如下：[是否倾斜|是否加粗|是否转小型大写]字体大小字体名称

Web字体

虽说可以通过备用字体来解决用户端字体缺失问题，但终究用户体验不好，且不一定备用字体所有用户都安装了。所以，现在CSS提供了Web字体，也就是服务器端字体。

/服务器提供字体

@font-face {

       font-family: 'abc';

       src: url('BrushScriptStd.otf');

}

p{

font-size:50px;

font-family:abc;

}

<p>这是html5</p>

英文字体文件比较小，而中文则很大。所以，中文如果想用特殊字体可以使用图片。大面积使用特殊中文字体，就不太建议了。

文本样式

text-decoration

none让本身有划线装饰的文本取消掉

underline让文本的底部出现一条下划线

    /*text-decoration: underline;*/  下划线

    /*text-decoration: overline;*/    上划线

    /*text-decoration: line-through;*/ 删除线

p{

text-decoration:underline;

}

解释：设置文本出现下划线。

让本来有下划线的超链接取消

a{

text-decoration:none;

}

text-transform

none将已被转换大小写的值恢复到默认状态

capitalize将英文单词首字母大写（需要有空格[我是 html5]-> [我是 Html5]）

uppercase将英文转换为大写字母

lowercase将英文转换为小写字母

p{

text-transform:uppercase;

}

解释：设置英文文本转换为大小写。

 

text-shadow

p{

 font-size: 50px;

text-shadow: 5px 5px 3px red;

}

解释：给文本添加阴影。其中四个值，第一个值：水平偏移；第二个值：垂直偏移；第三个值：阴影模糊度（可选）；第四个值：阴影颜色（可选）。

文本控制

CSS文本样式中还有一组对文本进行访问、形态进行控制的样式。

text-align

left靠左对齐，默认

right靠右对齐

center居中对齐

justify内容两端对齐

start让文本处于开始的边界

end让文本处于结束的边界

 

p{

       font-size: 50px;

       background: silver;

       /*text-align: left;*/

       /*text-align: right;*/

       text-align: center;

}

解释：指定文本的对齐方式。

white-space

normal默认值，空白符被压缩（无论多少个空格，最后压缩成一个空格），文本自动换行

nowrap空白符被压缩，文本不换行

pre空白符被保留，遇到换行符(回车)则换行

pre-line空白符被压缩，文本会在排满或遇换行符换行

pre-wrap空白符被保留，文本会在排满或遇换行符换行

p{

white-space:nowrap;

}

解释：处理空白排版方式。

letter-spacing

normal设置默认间距

长度值比如：“数字”+“px”

p{

letter-spacing:4px;

}

解释：设置文本之间的间距。

word-spacing

normal设置默认间距

长度值比如：“数字”+“px”

p{

word-spacing:14px;

}

解释：设置英文单词之间的间距（有空格的地方）。

line-height

normal设置默认间距

长度值比如：“数字”+“px”

数值比如：1,2,3

%比如：200%

p{

line-height:200%;

}

解释：设置段落行高（每行之间的距离）。

word-wrap

normal单词不断开

break-word断开单词

p{

word-wrap:break-word;

}

解释：让过长的英文单词断开。

text-indent

p{

text-indent:20px;

}

解释：设置文本首行的缩进（相当于每段的开头空两格）