CSS3字体样式实际效果的设定方式小结

2021-03-18 13:38 jianzhan

1. 文字黑影 text-shadow
实际上与黑影1样
text-shadow: X轴偏位量 Y轴偏位量 模糊不清半径 黑影色调
留意: 1.color可使用rgba色. 2.沒有inset值

CSS Code拷贝內容到剪贴板
  1. <style type="text/css">   
  2. .demo {   
  3.     width: 340px;   
  4.     padding: 30px;   
  5.     font: bold 55px/100% "微软雅黑";   
  6.     color: #566F89;   
  7.     background: #000;   
  8.     text-shadow: 2px 2px 0 #E4F1FF;   
  9. }   
  10. </style>   
  11.   
  12. <div class="demo">IMOOC</div>  

2. 外溢文字 text-overflow, 用(...)省略标识.

CSS Code拷贝內容到剪贴板
  1. text-overflow:clip;        /*表明裁切*/  
  2. text-overflow:ellipsis; /*表明显示信息省略标识*/  
  3. <style type="text/css">   
  4. .test_demo{   
  5.     text-overflow:ellipsis;   
  6.     overflow:hidden;   
  7.     whitewhite-space:nowrap;       /*强制性文字在1行内显示信息*/  
  8.     width:200px;   
  9.     background:#ccc;   
  10. }   
  11. </style>   
  12.   
  13. <div class="test_demo">   
  14.   超酷的IT技术性学习培训服务平台（我是省略号）   
  15. </div>  

3. 嵌入字体样式 @font-face
这个关键讲1下。
@font-face是CSS3中的1个控制模块，他关键是把自身界定的Web字体样式嵌入到你的网页页面中，伴随着@font-face控制模块的出現，大家在Web的开发设计中应用字体样式不怕只能应用Web安全性字体样式，你们之中也许有很多人会不当然的问，这样的物品IE能适用吗？当我告知大伙儿@font-face这个作用早在IE4就适用了你毫无疑问会觉得诧异。我的Blog就应用了很多这样的自定Web字体样式，例如说主页的Logo，Tags和网页页面中的笔写英健身培训，许多盆友问我怎样应用，能让自身的网页页面也适用这样的自定字体样式，1句话这些全是@font-face完成的，以便能让更多的盆友了解怎样应用他，今日我关键把自身的1点学习培训全过程贴上来和大伙儿共享。
最先大家1起看来看@font-face的英语的语法标准：

CSS Code拷贝內容到剪贴板
  1. @font-face {   
  2.    font-family: <YourWebFontName>;   
  3.    src: <source> [<format>][,<source> [<format>]]*;   
  4.    [font-weight: <weight>];   
  5.    [font-style: <style>];   
  6.  }  

赋值表明
1、YourWebFontName:此值指的便是你自定的字体样式名字，最好是是应用你免费下载的默认设置字体样式，他将被引入到你的Web元素中的font-family。如“font-family:"YourWebFontName";”
2、source:此值指的是你自定的字体样式的储放相对路径，能够是相对性相对路径还可以是死路径；
3、format：此值指的是你自定的字体样式的文件格式，关键用来协助访问器鉴别，其值关键有下列几类型型：truetype,opentype,truetype-aat,embedded-opentype,avg等；
4、weight和style:这两个值大伙儿1定很熟习，weight界定字体样式是不是为粗体，style关键界定字体样式款式，如斜体。
eg：

CSS Code拷贝內容到剪贴板
  1. <style type="text/css">   
  2. @font-face {   
  3.     font-family: "MOOC Font";   
  4.     src: url("https://www.jb51.net");   
  5. }   
  6. .demo {   
  7.     width: 340px;   
  8.     padding: 30px;   
  9.     color: #566F89;   
  10.     background: #000;   
  11.     font-size:58px;   
  12.     font-family: "monaco";   
  13. }   
  14. </style>   
  15.   
  16. <div class="demo">IMOOC</div>  

为您推荐