CSS代码 | 文字与字体
目录
一、自定义文本被选中的样式
二、文本对齐和间距
三、画线、粗体、斜体
四、阴影、毛玻璃、金属效果、文字旋转
五、文本溢出处理
六、常用字体栈
七、常用中文字体
一、自定义文本被选中的样式
二、文本对齐和间距
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
p.wordspacing{word-spacing:20px;}
/* 设置空格的长度*/
p.letterspacing{letter-spacing:20px;}
/* 设置字间距*/
p.lineheight{line-height:0.3;}
/* 设置行间距*/
p.whitespace_normal{white-space:normal;}
/* 默认，忽略多个空格为1个，忽略回车符*/
p.whitespace_pre{white-space:pre;}
/* 保留多个空格*/
p.whitespace_nowrap{white-space:nowrap;}
/* 忽略回车符，禁止换行，直到遇到br*/
p.whitespace_prewrap{white-space:pre-wrap;}
/* 保留所有空格符与回车符*/
p.whitespace_preline{white-space:pre-line;}
/* 忽略多个空格为1个，保留回车*/三、画线、粗体、斜体
文本装饰
文本装饰
文本装饰
文本装饰
文本装饰blink浏览器不支持
粗体字
italic斜体
oblique倾斜
斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。
倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。
通常情况下，两种效果在浏览器中看上去完全一样。
四、阴影、毛玻璃、金属效果、文字旋转
/*阴影效果*/
h1
{
text-shadow: 5px 5px 5px #6600ff;
}
div
{
text-outline: thickness blur color;
color:#ABABAB;
text-shadow: 2px 2px 2px 2px #ABABAB,25px 25px 5px 5px #ABABAB;
opacity:0.5;
}
div:hover
{
color:#000000;
opacity:1;
text-shadow: 0px 0px 0px #ABABAB;
}
/*毛玻璃效果*/
.normal{
width:300px;height:300px;
border:1px solid;
box-shadow:1px 1px 2px 2px #ccc;
transition:all 0.5s ease;
-webkit-transition:all 0.5s ease;
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-o-transform:scale(0.9);
-ms-transform:scale(0.9);
transform:scale(0.9);
font-size:26px;
color:rgba(0,0,0,0);
text-shadow: 0 0 10px black;
}
/*金属质感效果*/
p{
color:white;background:black;
font-weight:bold;font-size:30px;
position:relative;
}
span.cover{
width:100%;height:100%;position:absolute;
background:linear-gradient(to bottom,black 0%,transparent 50%,black);
opacity:0.5;
}
/*旋转文字感效果*/
div{
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
transform:rotate(-90deg);
}五、文本溢出处理
Document
如果此处的文字较多，将自动裁切裁切裁切裁切
如果此处的文字较多，将自动隐藏！如果此处的文字较多，将自动隐藏！如果此处的文字较多，将自动隐藏！如果此处的文字较多，将自动隐藏！如果此处的文字较多，将自动隐藏！
如果此处的文字较多，将出现滚动条！如果此处的文字较多，将出现滚动条！如果此处的文字较多，将出现滚动条！
六、常用字体栈
1 基于Times New Roman的字体风格
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
2 基于现代Georgia的字体风格
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
3 基于Garamond的更传统的风格
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
4 基于 Helvetica/Arial的字体风格
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
5 基于Verdana的字体风格
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
6 基于Trebuchet的字体风格
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
7 更为深度的“Impact”字体风格
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
8 monospace字体风格
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;七、常用中文字体
font-family: Helvetica, Tahoma, Arial, STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", SimSun, "宋体", Heiti, "黑体", sans-serif;