web字体和字体图标的使用

web字体

  • 开发人员可以为自已的网页指定特殊的字体,无需考虑用户电脑上是否安装了此特殊字体。
  • 支持程度比较好,甚至IE低版本浏览器也能支持。
  • 不同浏览器所支持的字体格式是不一样的。
    • TureTpe(.ttf)格式
    • .ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+;
    • OpenType(.otf)格式
    • .otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+;
    • Web Open Font Format(.woff)格式
    • woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+;
    • Embedded Open Type(.eot)格式
    • .eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有IE4+;
    • SVG(.svg)格式
    • .svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+;
  • 我们就需要为不同的浏览器准备不同格式的字体,通常我们会通过字体生成工具帮我们生成各种格式的字体,因此无需过于在意字体格式间的区别差异。(找字网有字库)查找更多中文字体。

字体图标

  • 把网页常用的一些小的图标,借助工具帮我们生成一个字体包,然后就可以像使用文字一样使用图标了。
  • 优点
    • 将所有图标打包成字体库,减少请求;
    • 具有矢量性,可保证清晰度;
    • 使用灵活,便于维护;
  • 可以尝试

CSS3兼容性

通过CSS3兼容性可查询CSS3各特性的支持程度,一般兼容性处理的常见方法是为属性添加私有前缀,如不能解决,应避免使用,无需刻意去处理CSS3的兼容性问题。

注意点

  • font-family后面的字体是用户本地电脑上存在的字体,可在c盘windows中的fonts文件夹可以找到,如果没有,默认为宋体。局限性:用户必须安装特定字体。
  • 使用web字体步骤:
    • 在上述网址中(找字网等)下载某种字体;(下载后输入他的后缀:.zip)
    • 引入字体:在style标签中,声明一个自定义字体;
    • 在下载的demo文件中找到对应的设置复制就形成了src(兼容多种浏览器)。
    • format告诉浏览器使用指定的格式渲染。
    • @font-face{ font-family:'itcast';src: }
    • 使用上述自定义的字体名称
    • body{font-family:'宋体',itcast;}(注意,中间用逗号)
    • 注意:下载的文件中只是生成了一部分,由于字体库较大,一般将要设置的字体在网址中复制生成下载即可,无需全部下载所有的汉字文件,会造成资源浪费。
  • 使用字体图标步骤:
    • 一个类名对应一个小图标。
    • 在某文件夹中放入css和font文件夹(只需要这两个文件),在style标签中写link引入css文件中某一个,然后写标签里添加类(类名为css中找某一个字体:icon-adjust等)即添加了一个小图标,可以在css中设置其属性,和字体设置一样。
  • 生成自定义的字体图标:http://iconfont.cn/
    • 通过该网站将.svg格式的图片可以转换成字体图标。
    • 使用ai将整张图片中小图片修改成svg格式(使用专门做矢量图的软件比如ai)
  • transitionEnd:该事件表示元素过渡完成后触发,但是有兼容问题,可以写-webkit-transitionEnd;
  • scroll:滚动条事件
  • mousewheel:滚轮事件(不需要滚动条)
  • 滚轮事件存在一定的兼容性,解决:名称不一样:firefox:DOMMouseScroll;
  • 全屏滚动插件:使用插件兼容:fullpage.js

CSS3可以使用简单的代码就实现特别多的效果呢,赶紧试一试吧!

转载于:https://my.oschina.net/yxmBetter/blog/831119

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值