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的font-face字体嵌入样式的方法讲解
May 13 HTML / CSS
css3动画效果小结(推荐)
Jul 25 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 HTML / CSS
HTML5新增加标签和功能概述
Sep 05 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 HTML / CSS
html svg生成环形进度条的实现方法
Sep 23 HTML / CSS
HTML中table表格拆分合并(colspan、rowspan)
Apr 07 HTML / CSS
box-shadow单边阴影的实现
May 21 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/11/19 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
JavaScript的类型简单说明
2010/09/03 Javascript
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
React组件的三种写法总结
2017/01/12 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
Vue实现手机计算器
2020/08/17 Javascript
python网络爬虫采集联想词示例
2014/02/11 Python
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
python将unicode转为str的方法
2017/06/21 Python
Python_LDA实现方法详解
2017/10/25 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
Pytorch to(device)用法
2020/01/08 Python
python开根号实例讲解
2020/08/30 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
英国女士家居服网站:hush
2017/08/09 全球购物
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
模具设计与制造专业应届生求职信
2013/10/18 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
实习班主任自我评价
2015/03/11 职场文书
保研导师推荐信
2015/03/25 职场文书
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
Python 实现Mac 屏幕截图详解
2021/10/05 Python