CSS代码 | 文字与字体

最新推荐文章于 2023-10-10 19:04:24 发布

小湾生产队队长

最新推荐文章于 2023-10-10 19:04:24 发布

阅读量293

点赞数

分类专栏： CSS样式文章标签： css javascript 前端

本文链接：https://blog.csdn.net/happy81997/article/details/131392524

版权

CSS样式专栏收录该内容

27 篇文章 11 订阅

订阅专栏

一、自定义文本被选中的样式

<style>
::selection
{
color:#9400D3;
background:#A9A9A9;
}
::-moz-selection
{
color:#9400D3;
background:#A9A9A9;

}
</style>

二、文本对齐和间距

 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个，保留回车*/

三、画线、粗体、斜体

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>文本装饰</title>
  <style type="text/css">
  .overline{text-decoration:overline;}
  .through{text-decoration:line-through;}
  .underline{text-decoration:underline;}
  .blink{text-decoration:blink;}
  .bold{font-weight:bold;}
  .italic{font-style:italic;}
  .oblique{font-style:oblique;}
  </style>
 </head>
 <body>
  <p class="overline">文本装饰</p>
  <p class="through">文本装饰</p>
  <p class="underline">文本装饰</p>
  <p class="blink">文本装饰blink浏览器不支持</p>
  <p class="bold">粗体字</p>
  <p class="italic">italic斜体</p>
  <p class="oblique">oblique倾斜</p>
  斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。
  倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。
  通常情况下，两种效果在浏览器中看上去完全一样。

 </body>
</html>

四、阴影、毛玻璃、金属效果、文字旋转

/*阴影效果*/
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);
}

五、文本溢出处理

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
  div.elli{
border:1px solid;
overflow:hidden; /*超出部分隐藏*/
white-space:nowrap;/*强制在一行显示*/
text-overflow:ellipsis;
width:200px;
height:20px;
}
  div.clip
{
border:1px solid;
overflow:hidden; /*超出部分隐藏*/
white-space:nowrap;/*强制在一行显示*/
text-overflow:clip;
width:200px;
height:20px;
}
div.hide
{
   overflow:hidden;
   border:1px solid;
   width:200px;
   height:50px;
}
div.scroll
{
   overflow:scroll;
   border:1px solid;
   width:200px;
   height:50px;
}

  </style>
 </head>
 <body>
  <div class="clip">如果此处的文字较多，将自动裁切裁切裁切裁切</div>
  <br>
  <div class="elli"><a href="#">如果此处的文字较多，将自动用省略号代替！</a></div>
  <br>
  <div class="hide">如果此处的文字较多，将自动隐藏！如果此处的文字较多，将自动隐藏！如果此处的文字较多，将自动隐藏！如果此处的文字较多，将自动隐藏！如果此处的文字较多，将自动隐藏！</div>
  <br>
  <div class="scroll">如果此处的文字较多，将出现滚动条！如果此处的文字较多，将出现滚动条！如果此处的文字较多，将出现滚动条！</div>
 </body>

</html>

六、常用字体栈

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;

小湾生产队队长

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS代码 | 文字与字体

目录一、自定义文本被选中的样式二、文本对齐和间距三、画线、粗体、斜体四、阴影、毛玻璃、金属效果、文字旋转五、文本溢出处理六、常用字体栈七、常用中文字体二、文本对齐和间距三、画线、粗体、斜体四、阴影、毛玻璃、金属效果、文字旋转五、文本溢出处理六、常用字体栈七、常用中文字体
复制链接

扫一扫