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感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
老生常谈CSS中的长度单位
Jun 27 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
html5与css3小应用
Apr 03 HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
html5中的一些标签学习(心得)
Oct 18 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
AmazeUI 评论列表的实现示例
Aug 13 HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
php 中英文语言转换类代码
2011/08/11 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
jQuery 选择器理解
2010/03/16 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
使用JS动态显示文本
2017/09/09 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
2017/12/28 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
超详细小程序定位地图模块全系列开发教学
2020/11/24 Javascript
Golang与python线程详解及简单实例
2017/04/27 Python
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
Python3 使用cookiejar管理cookie的方法
2018/12/28 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
python安装gdal的两种方法
2019/10/29 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
python生成word合同的实例方法
2021/01/12 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
一体化教学实施方案
2014/05/10 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
普通党员对照检查材料
2014/09/24 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
七年级作文之环保作文
2019/10/17 职场文书