首页 css 正文

我要投稿

css码-常用CSS代码 | 文字和字体

bendan520 css

2024-02-10 0 4,499 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

点击上方“前端专家”订阅！

文本是网页中最基本的元素。通常用户不太关心网站的文字风格。然而，文字的设置非常重要。多种风格的文字可以强化网站的内容层次，突出重点，让网页内容更加清晰。合理的。

明天，在这篇文章中，我将介绍文本和字体的个性特征和应用示例。因为字体的设置比较简单，所以值得重新审视。本文将主要介绍示例代码。

使用自定义字体

目前除IE外，所有主流浏览器均支持.ttf和oft字体。下面是示例代码的结果和代码：

<!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>使用@font-face自定义字体</title>
<style> 
@font-face
{
font-family: xujinglei;
src: url('xujinglei.ttf')
    ,url('xujinglei.eot'); /* IE9+ */
}
div
{
font-family:xujinglei;
font-size:18px; 
}
</style>
 </head>
 <body>
<div>
这段文字使用的是徐静蕾字体。
</div>
<br>
这段文字使用的是默认字体。
 </body>
</html>

文本缩进并删除第一个字符

我们经常在报纸或出版物中看到首字下沉的效果。这种效果在网站上也经常听到。示例效果及代码如下：

<!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>
  #a{text-indent:15px;}
  #b{text-indent:-6px;}
  #c{text-indent:0.5em;}
  #a:first-letter{
  font-size:25px;
  color:#B23AEE;
  float:left;
  }
  #b:first-letter{
  font-size:30px;
  color:red;
  }
  #c:first-letter{
  font-size:25px;
  color:#B23AEE;
  }
  p.uppercase:first-letter 
  {
  text-transform:uppercase;
  }
  </style>
 </head>
 <body>
  <p id="a">
  段落首字符下沉和15像素的缩进
  </p>
  <p id='b'>
  if -首字符不下沉、首字符英文小写和悬挂缩进（-6像素）
  </p>
  <p class="uppercase" id='c'>
  if 段落的首字符不下沉、首字母英文大写
  </p>
 </body>
</html>

自定义选定的文本样式

当鼠标在网页上选择文本时，默认样式为蓝底黄字。在CSS3中css码，这些样式是可以自定义的。示例代码及效果如下：

<!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>
::selection
{
color:#9400D3;
background:#A9A9A9;
}
::-moz-selection
{
color:#9400D3;
background:#A9A9A9;

}
</style>

 </head>

 <body>
  自定义文本选中样式演示网页
 </body>
</html>

文本对齐、间距

文本对齐是排版中常用的属性。由于不同语言的阅读习惯不同，对齐方式也不同。常用的代码例如示例代码：

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

线条、粗体、斜体

CSS可以实现文字的装饰效果。以下代码将直线添加到文本的左侧和中间。具体效果如下：

<!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);
}

文本溢出处理

在我们的工作中，为了保证设计的美观，我们经常要处理文本内容超出容器范围的问题。常用的处理方式有：简单裁剪、隐藏、隐藏显示省略号、使用滚动条css码，示例代码如下：

<!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基于TimesNewRoman的字体样式

字体系列:Cambria,"HoeflerText",Utopia,"LiberationSerif","NimbusRomanNo9LRegular",Times,"TimesNewRoman",serif;

2种基于现代乔治亚的字体样式

字体系列:Constantia,"LucidaBright",Lucidabright,"LucidaSerif",Lucida,"DejaVuSerif,""BitstreamVeraSerif","LiberationSerif",Georgia,serif;

3 基于 Garamond 的更传统风格

字体系列：“PalatinoLinotype”，Palatino，Palladio，“URWPalladioL”，“BookAntiqua”，Baskerville，“BookmanOldStyle”，“BitstreamCharter”，“NimbusRomanNo9L”，Garamond，“AppleGaramond”，“ITCGaramondNarrow”，“NewCenturySchoolbook”，“CenturySchoolbook” ","CenturySchoolbookL",乔治亚州,衬线体;

4种基于Helvetica/Arial的字体样式

字体系列：Frutiger、“FrutigerLinotype”、Univers、Calibri、“GillSans”、“GillSansMT”、“MyriadPro”、Myriad、“DejaVuSansCondensed”、“LiberationSans”、“NimbusSansL”、Tahoma、Geneva、“HelveticaNeue”、Helvetica、宋体、无衬线字体；

基于 Verdana 的 5 种字体样式

字体系列：Corbel、“LucidaGrande”、“LucidaSansUnicode”、“LucidaSans”、“DejaVuSans”、“BitstreamVeraSans”、“LiberationSans”、Verdana、“VerdanaRef”、sans-serif；

6 种基于 Trebuchet 的字体样式

字体系列：“SegoeUI”，Candara，“BitstreamVeraSans”，“DejaVuSans”，“BitstreamVeraSans”，“TrebuchetMS”，Verdana，“VerdanaRef”，sans-serif;

7 更深的“Impact”字体样式

字体系列：Impact、Haettenschweiler、"FranklinGothicBold"、Charcoal、"HelveticaInserat"、"BitstreamVeraSansBold"、"ArialBlack"、sans-serif；

8等宽字体样式

字体系列：Consolas、“AndaleMonoWT”、“AndaleMono”、“LucidaConsole”、“LucidaSansTypewriter”、“DejaVuSansMono”、“BitstreamVeraSansMono”、“LiberationMono”、“NimbusMonoL”、Monaco、“CourierNew”、Courier、等宽字体；

常见的英语风格：

font-family:Helvetica,Tahoma,Arial,STXihei,"中文字幕黑","微软雅黑","Google亚黑",SimSun,"粗体",黑体,"宋体",sans-serif;

其实昨晚的内容很简单，也经常用到。这样的代码还是值得收藏的。下一节小编将为大家分享图像中常用的CSS代码。

收藏 (0) 打赏

感谢您的支持，我会继续努力的!