web字体,图标
当我们发现现有的字体,图标无法满足我们时,除了可以通过美工获取,也能够通过互联网获取资源
常见字体格式:
-
TureTpe(.ttf)格式
- .ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+;
- .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+
- .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+
- woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+
-
Embedded Open Type(.eot)格式
- .eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有IE4+
- .eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有IE4+
-
SVG(.svg)格式
- .svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+
web字体
顾名思义 就是使用网上的字体,一般在页面上需要部分使用特殊字体时使用
- 获取网址(包括,但不仅限于此):
- [iconfont][2]
- [有字库][3]
- 使用方式:
- 不同的网站的字体使用可能会略有不同,直接查看网站使用步骤即可
web图标
类似于web字体,web图标是使用网络资源来实现一些简单的图标,避免使用图片进行设置
-
获取网址(包括,但不仅限于此):
- [iconfont][4]
- [fontastic][5]
- 账号:haoyuexing@gmail.com
- 密码:haoyuexing
- 自己用就好
- [免费web图标][6]
-
使用方式:
- 本质就是字体的替换
- 不同的网站的字体图标使用可能会略有不同,直接查看网站使用步骤即可
兼容性查询
我们可以通过帮助手册查询CSS3的兼容性问题,也能够通过网站
caniuse
进行查询
地址如下:
[caniuse][2]-
使用方式:
- 输入希望查询的样式:比如
border-image
- 属性名正确的情况下,可以找到对应的CSS样式
- 查看
红色
不可用,绿色
可用,青色
的为需要注意
- 输入希望查询的样式:比如