CSS字体样式

最新推荐文章于 2024-04-06 20:41:17 发布

Albert-Wilson

最新推荐文章于 2024-04-06 20:41:17 发布

阅读量844

点赞数

分类专栏： css 文章标签： CSS 字体样式

本文链接：https://blog.csdn.net/hxwm_8937/article/details/76141576

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

 
 字体、字号： 

  font （缩写格式） 

  font-weight （粗细） 

  font-size （大小） 

  font-family （字体系列） 

  font-style （字体样式） 

 
 （1）字体加粗  
 font-weight 

 
 其属性值可以为：数字：100~900 

 
 名称：bold:加粗，与900等效 

 
 bolder：加粗效果更明显 

 
 lighter：细长文本 

 
 normal：正常文本 

 
 （2） 
 字体大小  
 font-size 

 
 font-size: 30px; 

 
 （3）字体类型  
 font-family 

 
 font-family: 新宋体; 

 
 （4）字体样式  
 font-style  

 
 定义字体是否是斜体 

 
 font-style: italic; 

 
 字体颜色： 

  color（颜色） 

  opacity（透明度） 

 
 （1）字体颜色  
 color 

 
 其属性值可以为：名称：red..... 

 
 符号：#878787 

 
 color: red; 

 
 （2）字体透明度  
  
 opacity

 
 透明度：0几乎看不到，1正常*/ 

 
 opacity: 0.5; 

 
 行距，对齐等： 

  line-height（行高） 

  text-align（对齐） 

  letter-spacing（字符间距） 

  text-decoration（文本修饰） 

  overflow 

  text-overflow 

  text-index （缩进） 

  text-shadow（文本阴影） 

  text-stroke（文本描边） 

 
 （1）行高  
 line-height 

 
 可以设置文本的行高等于他容器的高度，从而可以实现文本的垂直方向对齐，因为文本在该文本的行高内默认是垂直上居中 

 
 line-height: 100px; 

 
 （2）对齐  
 text-align 

 
 其属性值可以为left，center，right 

 
 text-align: center; 

 
 （3）字符间距  
 letter-spacing 

 
 letter-spacing:0.5px 

 
 （4）文本修饰  
 text-decoration 

 
 其属性值可以为：ubderline（下划线） 

 
 line-through（中间线）等 

 
 text-decoration: line-through; 

 
 （5）下划线或中间线的颜色以及实/虚线 

 
 text-decoration-color: blue; 

 
 text-decoration-style:dotted; 

 
 （6）溢出  
 overflow 

 
 把溢出的文本隐藏起来，不显示 

  overflow: hidden; 

  overflow: hidden; 

  /* 
 text-overflow:对隐藏的文本以什么形式表现，ellipsis：以点点点的形式显示*/ 

  text-overflow: ellipsis; 

  white-space: nowrap; 

 
 （7）悬挂或缩进  
 text-index 

 
 /*首行缩进*/ 

 
 text-indent: 2em; 

 
 /*首行悬挂*/ 

 
 text-indent: -2em; 

 
 （8）文本阴影  
 text-shadow  

 
 （ 
 text-shadow：x轴上的偏移距离 y轴上的偏移距离 模糊程度 阴影颜色） 

 
 text-shadow: 5px 1px 0px blue; 

 
 （9）文本描边  
 text-stroke 

 
 （ 
 -webkit-text-stroke: 描边边的宽度 描边边的有颜色） 

 
 -webkit-text-stroke: 2px blue; 

 
 对于某些特殊字符，如：html，要让它显示应用（ 
 &lt；...&gt） 

  &lt;html&gt; 

2^3

  <!-- 
 sup:上标--> 

  2<sup>3</sup> 

  H< 
 sub>2</sub>0 

 
 空格 

 
 你 
 &nbsp; &nbsp; &nbsp;好 

 
  字体样式复用顺序 
 
  font复用 
 
  font： 
  style varaint weight 
    
  size line-height family 
    
  font：75%/1.8Arial，'Microsoft Yahei', sans-serif 
 
  font-family复用 
 
  类族名称： 
 
  衬线体 serif 
 
  非衬线体 sans-serif 
 
   等宽体 monospace 
 
   手写体/非手写体 
 
   符号体 
 
  font-family：Arial, 'Microsoft Yahei', sans-serif 
 
  字体族名称，可以多个，以“，”隔开 
 
  类族名称，必须以类族名称结尾