CSS3新属性:在网站中使用访客电脑里没有安装的字体

CSS的font-family属性使网页可以使用客户电脑里的字体,从而得到多姿多彩的WEB页面,但当客户端没有你想要使用的字体时怎么办呢?我们总不能让每个访问者都去安装一个字体吧?事实上,这是可以的!不过不是访客主动下载的,而是网站开发者帮访客下载安装的,具体怎么实现的,我们还要从字体文件的格式说起。

字体格式类型主要有几个大分类:TrueType、Embedded
Open Type 、OpenType、WOFF 、SVG。
 
TrueType
 Windows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比基于矢量的字体更容易处理,保证了屏幕与打印输出的一致性。同时,这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。
 
EOT – Embedded Open Type
(.eot)
 EOT是嵌入式字体,是微软开发的技术。允许OpenType字体用@font-face嵌入到网页并下载至浏览器渲染,存储在临时安装文件夹下。
 
OpenType
(.otf)
 OpenType是微软和Adobe共同开发的字体,微软的IE浏览器全部采用这种字体。致力于替代TrueType字体。
 
WOFF – Web Open Font Format
(.woff)

WOFF(Web开发字体格式)是一种专门为了Web而设计的字体格式标准,实际上是对于TrueType/OpenType等字体格式的封装,每个字体文件中含有字体以及针对字体的元数据(Metadata),字体文件被压缩,以便于网络传输。


SVG (Scalable Vector Graphics) Fonts
(.svg)
 SVG是由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体,还有一种gzip压缩格式的SVG字体。

 
 在CSS3中,添加了一个@face-face属性,通过这个属性我们就可以加载服务器上的字体文件,放在客户机的临时安装文件夹下,
 
 用法如下:

?





1

2

3

4

5

6

@font-face {

    font-family: "FontAwesome";

    font-style: normal;

    font-weight: normal;

    src: url("fontawesome-webfont.eot?#iefix") format("eot"), url("fontawesome-webfont.woff") format("woff"), url("fontawesome-webfont.ttf") format("truetype"), url("fontawesome-webfont.svg#FontAwesome") format("svg");

}

CSS3新属性:在网站中使用访客电脑里没有安装的字体,布布扣,bubuko.com

时间: 05-16

CSS3新属性:在网站中使用访客电脑里没有安装的字体的相关文章

css3让浏览器端可以显示用户电脑里没有安装的字体

@font-face @font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体. 语法: 1 @font-face { 2 font-family : 字体名称; 3 src : 字体文件在服务器上的相对或绝对路径; 4 } 这样设置之后,就可以像使用普通字体一样在(font-family)中设置字体样式. 1 p { 2 font-size :12px; 3 font-family : 字体名称;/*要跟@font-face中设置的字体一致*/ 4 }

两点补充——CSS3新属性以及弹性布局

CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位] 1.px:像素.长度固定,表示分辨率占几个像素点: 2.%:表示相对于默认值的百分比: 3.em:长度与元素的字号挂钩. rem:长度与根元素的字号挂钩. 即与html 的 font-size 挂钩,若不设置,默认16px . [ em与rem区别 ] em与当前元素自身的font-size挂钩

css3新属性的总结

今天继续总结css3的一些css3新样式,先列一个简单的提纲,重要的还是圆角.阴影.渐变.文字缩略,最最重要的是过度transition,变换transform和animation圆角阴影渐变 圆形渐变 线性渐变 跳变 重复渐变蒙版倒影滤镜多背景文字方向文字缩略 过渡transition 变换transform动画animation: keyframes 一个一个来:1>圆角: border-radius:px %; border-radius: 一个值; 四个角 border-radius:

基于CSS3新属性Animation及transform实现类似翻书效果

注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写 先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0) 类似翻书效果,原本的意思是使用JS来控制的,点击一次之后使用setInterval去控制书页翻过去的动画,当书页翻转180°之后,清除掉setInterval,但当我连续点击,那之前没有翻转180°的书页将无法继续完成之前的动作,可以用清除setInterval的方式,但总感觉动画效果不好,当然还有其他解决办法,但突

css3新属性

1.filter(过滤) 值1:blur(xpx);     模糊度     默认为0 eg:#img{filter:blur(5px)} 值2:grayscale();   灰度       默认为1(100%) 值3:sepia()        黄棕色      默认为1(100%) 值4:saturate()    饱和度    默认为1(100%) 值5:hue-rotate()   色相旋转    默认为0(0) 值6:invert()    反色     默认为1(100%) 值7

calc()-可以进行计算的css3新属性

用法: width:calc(100% - (20px + 2px) * 2); /*用100%减去左右两个20px的padding和2px的border*/ 对于calc(),总结以下要点: 1.兼容性:在IE9+.FF4.0+.Chrome19+.Safari6+支持较好,移动端支持不理想: 2.表达式支持加.减.乘.除运算,同时也支持单位的混合使用(%.px.em等); 2.表达式中有"+","-"运算符的,前后必须要有空格.

css的盒模型,及css3的box-sizing新属性

css的盒模型包含了content(元素自身).padding(内边距).border(边框)及margin(外边距). 如图,浏览器控制台elements的computed可以清晰显示元素盒模型,鼠标多动动就明白了:(蓝色区域表示content元素自身,这里是整个窗口的内容) 盒模型有两种:标准模式和怪异模式.在<!DOCTYPE>声明缺失时就会在ie6.ie7.ie8下触发怪异模式 标准模式下:盒子总宽度/高度 = content + padding + border + margin,c

小习html5为表单添加的新属性

输入框html5新增属性 在学习任何一种语言时都提到“渐进增强”原则,说白了就是兼容性有木有.虽然html5一些新属性在实际使用中受到限制,但是依然阻挡不了伟大的同伴们学习的脚步.近来有点儿忙,这是2016年第一篇文章.内容比较简单只是了解学习. 输入框按输入的内容分,也就是单行输入和多行输入,既是<input type="">和<textarea></textarea> <textarea></textarea>标签属性 a

当一个CSS属性在测试中的时候,是用不同浏览器的识别码做前缀的。

//-ms代表[ie]内核识别码 //-moz代表火狐[firefox] //-webkit代表谷歌[chrome]/苹果[safari] //-o代表欧朋[opera] 在标准还未确定时,部分浏览器已经根据最初草案实现了部分功能, 为了与之后确定下来的标准进行兼容,所以每种浏览器使用了自己的私有前缀与标准进行区分, 当标准确立后,各大浏览器将逐步支持不带前缀的css3新属性. 详细的浏览器内核区别: Gecko内核,css前缀为"-moz-",火狐浏览器 WebKit内核,css前缀