CSS3字体效果的设置方法小结


Posted in HTML / CSS onJune 13, 2016

1. 文本阴影 text-shadow
其实与阴影一样
text-shadow: X轴偏移量 Y轴偏移量 模糊半径 阴影颜色
注意: 1.color可以使用rgba色. 2.没有inset值

CSS Code复制内容到剪贴板
  1. <style type="text/css">   
  2. .demo {   
  3.     width340px;   
  4.     padding30px;   
  5.     fontbold 55px/100% "微软雅黑";   
  6.     color#566F89;   
  7.     background#000;   
  8.     text-shadow2px 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;       /*强制文本在一行内显示*/  
  8.     width:200px;   
  9.     background:#ccc;   
  10. }   
  11. </style>   
  12.   
  13. <div class="test_demo">   
  14.   超酷的IT技术学习平台(我是省略号)   
  15. </div>  

3. 嵌入字体 @font-face
这个重点讲一下。
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,很多朋友问我如何使用,能让自己的页面也支持这样的自定义字体,一句话这些都是@font-face实现的,为了能让更多的朋友知道如何使用他,今天我主要把自己的一点学习过程贴上来和大家分享。
首先我们一起来看看@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:这两个值大家一定很熟悉,weight定义字体是否为粗体,style主要定义字体样式,如斜体。
eg:

CSS Code复制内容到剪贴板
  1. <style type="text/css">   
  2. @font-face {   
  3.     font-family"MOOC Font";   
  4.     srcurl("https://3water.com");   
  5. }   
  6. .demo {   
  7.     width340px;   
  8.     padding30px;   
  9.     color#566F89;   
  10.     background#000;   
  11.     font-size:58px;   
  12.     font-family"monaco";   
  13. }   
  14. </style>   
  15.   
  16. <div class="demo">IMOOC</div>  
HTML / CSS 相关文章推荐
Css3+Js制作漂亮时钟(附源码)
Apr 24 HTML / CSS
使用css3制作登录表单的步骤
Apr 07 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
Dec 22 HTML / CSS
CSS3实现文本垂直排列的方法
Jul 10 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
Feb 07 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 HTML / CSS
bootstrapv4轮播图去除两侧阴影及线框的方法
Feb 15 HTML / CSS
CSS3美化表单控件全集
Jun 29 #HTML / CSS
CSS3+DIV实现漂亮的动画彩色标签
Jun 16 #HTML / CSS
超酷炫 CSS3垂直手风琴菜单
Jun 28 #HTML / CSS
CSS3中的注音对齐属性ruby-align用法指南
Jul 01 #HTML / CSS
CSS3中Transform动画属性用法详解
Jul 04 #HTML / CSS
CSS3 渐变(Gradients)之CSS3 线性渐变
Jul 08 #HTML / CSS
CSS3 渐变(Gradients)之CSS3 径向渐变
Jul 08 #HTML / CSS
You might like
一个php作的文本留言本的例子(五)
2006/10/09 PHP
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
php实现的漂亮分页方法
2014/04/17 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
js子页面获取父页面数据示例
2014/05/15 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
Python 中的lambda函数介绍
2018/10/10 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
Python的两道面试题
2013/06/29 面试题
大学生自我鉴定范文模板
2014/01/21 职场文书
环保倡议书50字
2014/05/15 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
2015年手术室工作总结
2015/05/11 职场文书
科技馆观后感
2015/06/08 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书