css3字体

1.定义个性化字体

@font-face{

font-family:字体名字;

src:字体地址,可以多写几个用逗号隔开兼容浏览器

}

div{

font-family:字体名字/*使用字体*/

}

2.使用反射让字体倒影

box-reflect:{方向,间距,渐变效果}

注:padding会yingxiang倒影之间的间距

渐变效果

none(无)

url:指定遮罩图像

linear-gradient(参数):线性渐变

redial-gradient(参数):镜像渐变

repeating-linear-gradient(参数):使用重复线性渐变创建遮罩图像

repeating-redial-gradient(参数):使用重复镜像渐变创建遮罩图像

例子;

box-reflect:blow 1px linear-gradient(transparent,transparent50%,ragba(0,0,0,.3));

字体阴影

text-shadow:水平偏移量,垂直偏移量,模糊程度,颜色

字体描边

text-stroke:宽度 颜色;(目前只有webkit内核支持该属性)

实际开发中利用字体阴影制作这一效果

例子

text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;等同于 text-stroke:1px #000;

ie6-9可以使用特有的滤镜效果来实现

字体分栏效果

column-count:栏数

column-gap:每一列之间的宽度

column-rule:定义分栏中间的样式

column-rule:样式宽度 样式类型 样式颜色

火狐要加前缀-moz-

chrome 苹果加-webkit

超出部分省略号

white-space:nowrap;/*定义文本不换行*/

text-overflow:ellipsis;/*省略号*/-o-text-overflow:ellipsis;兼容Opera浏览器

overflow:hidden;/*超出部分隐藏*/

时间: 2024-10-04 07:22:04

css3字体的相关文章

CSS3字体图标

网址:http://icomoon.io/ 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <

CSS3 字体【@font-size使用全攻略-配合font squirrel】

篇1: CSS3 字体 CSS3 @font-face 规则 以前CSS3的版本,网页设计师不得不使用用户计算机上已经安装的字体. 使用CSS3,网页设计师可以使用他/她喜欢的任何字体. 当你发现您要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户. 您所选择的字体在新的CSS3版本有关于@font-face规则描述. 您"自己的"的字体是在 CSS3 @font-face 规则中定义的. 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号. 属性

css3 字体、2D转换、3D转换

学习篇之CSS3 字体.2D转换.3D转换 一.字体 @font-face 将字体文件存放到 web 服务器上,通过CSS3 @font-face规则中定义,它会在需要时被自动下载到用户的计算机上. @font-face { font-family: myFonts;//定义字体名称 src: url(myFonts.ttf), url(myFonts.eot), url(myFonts.otf);//字体文件来源 可选.ttf..eot..otf等三种格式文件 } PS:为了兼容不同浏览器最好

html自学笔记(css3字体以及动画)

在 CSS3 之前,我们只能使用计算机上安装好的字体.通过 CSS3,我们可以使用他们喜欢的任意字体.--------引用w3c原文. 自定义字体很简单,在css样式表中 @font-face { font-family: cusFont; src: url(../soure/汉鼎繁综艺.TTF);} font-family 自定义的字体的名字 src字体来源地址,可以是一个本地路径,也可以是一个网络链接.使用方式: div{ font: 20px/25px 'cusFont'; text-al

CSS3字体模块

介绍 字体提供了包含字符的视觉表现的资源.在最简单的等级中,其包含由字符编码到表示这些字符的形状(被称为字形)的映射信息.根据一组标准字体属性被分入一个字体家族的字体共享一个通用设计风格.在一个家族中,表现指定字符的形状,可以通过笔画粗细.倾斜或相对宽度而彼此改变.一个给定的字体外观是为这些属性的一个唯一组合而设计的.对于文本的给定范围,在渲染这些文本时使用CSS字体属性选择所使用的字体家族及家族中的字体外观.作为一个简单的例子,为了使用Helvetica字体的粗体形式,可以使用: body {

CSS3字体发光效果

本篇文章由:http://xinpure.com/the-css3-font-glow-effect/ CSS3 并没有直接设置发光效果的属性,但是可以利用 text-shadow 属性实现此效果 text-shadow 该属性为文本添加阴影效果 text-shadow: h-shadow v-shadow blur color; h-shadow: 水平阴影的位置(阴影水平偏移量),可为负值,必需 v-shadow: 垂直阴影的位置(阴影垂直偏移量),可为负值,必需 blur: 阴影模糊的距离

css3 字体

CSS3 @font-face 规则 在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体. 通过 CSS3,web 设计师可以使用他们喜欢的任意字体. 当您您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上. 您"自己的"的字体是在 CSS3 @font-face 规则中定义的. 浏览器支持 Firefox.Chrome.Safari 以及 Opera 支持 .ttf (True Type Fonts) 和

css3 字体自适应

css3提供了一些与当前viewpoint相关的元素,vw,vh,vim等. “viewpoint” = window size vw = 1% of viewport width 1vh = 1% of viewport height 1vmin = 1vw or 1vh, 最小 1vmax = 1vw or 1vh, 最大 兼容性:chrome 20+/ safari 6+/ IE 10+ / FF 19+ / IOS 6+ DEMO地址:http://qianduannotes.sinaa

css3字体效果

</head> <style> div{ text-shadow:5px 5px 5px #CF3; font-size:40px; color:#00F; font-weight:bold;//字体加粗 font-family:"Lucida Console", Monaco, monospace; } </style><body> <!--text-shadow:length length length color--前三个le