css 文本与字体
2016-04-20 22:11
429 查看
在互联网产品中,页面对于字体和文本的风格要求越来越苛刻,对于一些字体如果使用图片则无形中增加了页面的负载,影响页面加载速度。使用css样式替代图片不仅减少UI工作量,也大大提高了开发的效率和用户的体验性。
css3提供一下样式及方法便于快速处理页面文本要求:
1.当文本长度超出规定范围,使用...标记(比较适合在列表中显示title)
但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果,代码如下
4.定义多色阴影 text-shadow属性可以接受一个以逗号分割的阴影效果列表,并应用到该元素的文本上。
效果如下:
5.定义火焰文字:借用阴影效果列表机制,可以使用阴影叠加出燃烧的文字特效。
效果如下:
6.定义立体文字 A.定义凸起文字效果
效果如下:
B.定义凹下的文字效果
效果如下:
7.定义外发光文字
效果如下:
但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果,代码如下
text-overflow:ellipsis; overflow:hidden; white-space:nowrap;2.嵌入字体@font-face @font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。
@font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; }3.设计文本阴影 text-shadow: X-Offset Y-Offset blur color;
X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移;
Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移;
Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0;
Color:是指阴影的颜色,其可以使用rgba色。
4.定义多色阴影 text-shadow属性可以接受一个以逗号分割的阴影效果列表,并应用到该元素的文本上。
效果如下:
5.定义火焰文字:借用阴影效果列表机制,可以使用阴影叠加出燃烧的文字特效。
效果如下:
6.定义立体文字 A.定义凸起文字效果
效果如下:
B.定义凹下的文字效果
效果如下:
7.定义外发光文字
效果如下:
相关文章推荐
- css设置文本字体
- CSS之对字体和文本的修饰
- css中的文本 字体 链接 表格
- 06---HTML+CSS---字体与文本
- 【css技术指南笔记】 第四章 字体 文本
- CSS(3):文本,字体,颜色
- CSS之字体属性与文本属性
- CSS 教程Part2 [背景、文本、字体](摘录自 W3C School)
- HTML5 Canvas绘文本动画(使用CSS自定义字体)
- css文本和字体
- Android程序员学WEB前端(7)-CSS(2)-伪类字体文本背景边框-Sublime
- css 文本及字体、链接、背景、图片
- CSS学习之字体样式+文本样式
- 03 CSS学习---字体与文本相关的样式属性
- CSS学习笔记(1)CSS基础语法/字体/文本
- CSS 基础:文本和字体(4)<思维导图>
- CSS 文本、字体、链接
- Css基础学习一:字体,文本,颜色,背景,边框,边距
- css 样式设计(一)( 在线150个例子 | 背景 | 文本 | 字体 | 链接 | 列表 | 表格 | 盒模型 | 边框 | 轮廓 | 边距 | 填充 |分组和嵌套 | 尺寸 | 定位 | 浮动 |对齐 )
- CSS-字体和文本样式