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属性,通过这个属性我们就可以加载服务器上的字体文件,放在客户机的临时安装文件夹下,
用法如下:
@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新属性:在网站中使用访客电脑里没有安装的字体的更多相关文章
- 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...
- 两点补充——CSS3新属性以及弹性布局
CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...
- css3新属性position: sticky 一分钟实现 导航栏悬停功能
css3新属性position: sticky 一分钟实现 导航栏悬停功能 前言 正文 前言 想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如咱们的csdn ...
- 使用css3新属性clip-path制作小图标
一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...
- CSS3新属性注释及实例
这里把CSS3的新属性单独拿出来讲解一下: border-radius 属性用于创建圆角 div { border:2px solid; border-radius:25px; -moz-border ...
- css3新属性@ text-shadow
text-shodow是css3的新属性,可以利用这个属性使字体更有立体感,还可以创造有趣的效果. 1.语法形式:text-shadow : x-offset(x轴偏移量) y-offset(y轴偏移 ...
- css3新属性的总结
今天继续总结css3的一些css3新样式,先列一个简单的提纲,重要的还是圆角.阴影.渐变.文字缩略,最最重要的是过度transition,变换transform和animation圆角阴影渐变 圆形渐 ...
- css3新属性的学习使用
display 可选值:none隐藏元素: block显示为块级元素: inline显示为行级元素 inlineblock显示为内联块级元素,本身将是一个行级元素,但是拥有 块级元素的所有属性,比如宽 ...
- css3新属性运用
1.css3新单位vh.vw,这个单位是相对显示窗口的宽度或高度 vh等于viewport高度的1/100.例如,如果浏览器的高是900px,1vh求得的值为9px.同理,如果显示窗口宽度为750px ...
随机推荐
- MongoDB 删除,添加副本集,并修改副本集IP等信息
MongoDB 删除,添加副本集,并修改副本集IP等信息 添加副本,在登录到主节点下输入 rs.add("ip:port"); 删除副本 rs.remove("ip:po ...
- Linux 文件夹和文件大小排序
Linux 文件夹和文件大小排序 文件夹排序 du -k | sort -rn 文件排序 ls -lS -r, –reverse 依相反次序排列 -R, –recursive 同时列出所有子目录层 - ...
- AS-PATH(路径属性)路由路径欺骗术
AS-PATH(路径属性)路由路径欺骗术: ①:抓取感兴趣流量——前缀与访问 ②:创建路由地图 ③:路由地图第一法则——permit 10 ④:在第一法则中,匹配(感兴趣流量) ⑤:设置 路径欺骗术— ...
- 5. 支撑高并发,高可用,海量数据备份恢复的Redis重要性
商品详情页的架构实现 缓存架构 第一块儿,要掌握的很好的,就是redis架构 高并发,高可用,海量数据,备份,随时可以恢复,缓存架构如果要支撑这些要点,首先呢,redis就得支撑 redis架构,每秒 ...
- 经典SQL50句
50个常用的sql语句 Student(S#,Sname,Sage,Ssex) 学生表 Course(C#,Cname,T#) 课程表 SC(S#,C#,score) 成绩表 Teacher(T#,T ...
- TX2开发板Ubuntu16.04安装中文输入法
打开终端输入安装输入法: sudo apt-get install fcitx fcitx-googlepinyin fcitx-module-cloudpinyin fcitx-sunpinyin ...
- 4 ~ express ~ 划分模块开发
一,根据功能进行模块划分 1,前台模块 2,后台管理模块 3,API模块 二,使用 app.use() 进行模块划分 1,app.use('/',require('./router/main')) 1 ...
- 19 01 15 js 尺寸相关 滚动事件
尺寸相关.滚动事件 1.获取和设置元素的尺寸 width().height() 获取元素width和height innerWidth().innerHeight() 包括padding的width和 ...
- JAVAEE 和项目开发(第二课:HTTP协议的特点和交互流程)
HTTP 的概念和介绍 概念:超文本传输协议(Hyper Text Transfer Protocol) 作用:规范了浏览器和服务器的数据交互 特点: 简单快速:客户向服务器请求服务时,只需传送请求方 ...
- python奇淫技巧之 抽屉 自动点赞
前言 嘿,各位小伙伴晚上好呀,今天又给大家带来干货内容啦,今天带来的是,如何自动登录抽屉,并且点赞 原计划打算,是不打算使用selenium的,但是因为要涉及点赞,所以免不了登录,但是我又被啪啪打脸了 ...