undefined
web font 是应用在 web 中的一种字体技术,在 CSS 中使用 font-face 定义新的字体。先了解操作系统中的字体:
undefined
a)、安装好操作系统后,会默认安装一些字体,这些字体文件描述了每一个文字的形态,一般中文文件大,英文文件小,因为中文字符数多;在控制面板中可以找到文字文件夹,在 C:\Windows\Fonts 下也可以直接找到。另外如果想让自己的电脑上有更加丰富的字体,可以下载新的字体文件后复制到改位置。
undefined
undefined
b)、我们在文档中显示的字体应该在系统中能找到才会正常显示,比如你在 word 中使用了黑体字,但是将 word 文件发给另外一个人,他的电脑上并没有黑体字,此时就不能按黑体正常显示,网页也一样。为了让网页上能显示本地没有的字体我们可以使用 font-face, 这并不是 CSS3 创始的一种技术,早在 IE5 中就实现了。
undefined
undefined
@font-face 能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体,可以实现矢量图标。如下所示:
undefined
undefined
微软的 IE4 已经是开始支持这个属性,但是只支持微软自有的. eot (Embedded Open Type) 格式,而其他浏览器直到现在都没有支持这一字体格式。然而,从 Safari 3.1 开始,网页重构工程师已经可以设置. ttf(TrueType) 和. otf(OpenType) 两种字体做为自定义字体了。
undefined
undefined
可缩放性(Scalability):
基于字体的 icon 是与分辨率无关并能缩放到任何想要程度的技术。你的图标看起来毫不关心 retina,HDPI,XHDPI 等等屏幕,但渲染时会根据目标设备自动调整,你将有能力应对任何当下,未来,或大多数任意规格的设备
undefined
尺寸(Size):
裁剪到正确的比例,icon font 的文件的大小要比起位图小到难以置信的程度,使用 icon font 时,你不需要根据不同设备准备不同的图片,你的 APP 只需要在启动时加载一次 icon font 文件即可。
undefined
可维护性(Maintainability):
自你的 icon 打包进一个字体文件,在项目自始至终你仅需要维护这个单一的字体文件。
通过管理字体文件你可以很自然的组织你的 icon 集合,任意的进行修改或扩展
undefined
可推广性(Adoption):
然而,应用这样的 icon fonts 可能会影响你和你同事之间的工作流程,但说服让他们采用这样的技术也非常简单,有数款免费或收费的工具帮你轻松达到目的并能看到很好的应用结果,在几乎任意(手机)移动平台、浏览器或操作系统
灵活性(Flexibility):
应用 icon fonts 技术中最有意义的一项能力是可以操纵 icon fonts, 改变颜色,大小,仅仅几行代码就可以在瞬间改变外观
可交互性 (Interactivity):
由于灵活性以及能够通过代码方便的操纵,icon fonts 是独一无二的在运行时被操纵,通过应用 icon fonts 技术, 你能轻松的在不同状态显示对应的不同效果,创建动画。
undefined
undefined
1.3.1、TureType(.ttf) 格式:
.ttf 字体是 Windows 和 Mac 的最常见的字体,是一种 RAW 格式,因此他不为网站优化, 支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】;
1.3.2、OpenType(.otf) 格式:
.otf 字体被认为是一种原始的字体格式,其内置在 TureType 的基础上,所以也提供了更多的功能, 支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】;
1.3.3、Web Open Font Format(.woff) 格式:
.woff 字体是 Web 字体中最佳格式,他是一个开放的 TrueType/OpenType 的压缩版本,同时也支持元数据包的分离, 支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】;
1.3.4、Embedded Open Type(.eot) 格式:
.eot 字体是 IE 专用字体,可以从 TrueType 创建此格式字体, 支持这种字体的浏览器有【IE4+】;
1.3.5、SVG(.svg) 格式:
.svg 字体是基于 SVG 字体渲染的一种格式, 支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。
这就意味着在 @font-face 中我们至少需要. woff,.eot 两种格式字体,甚至还需要. svg 等字体达到更多种浏览版本的支持
undefined
undefined
@font-face {
font-family:
}
1、YourWebFontName: 此值指的就是你自定义的字体名称,最好是使用你下载的默认字体,他将被引用到你的 Web 元素中的 font-family。如 "font-family:"YourWebFontName";"
2、source: 此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径;
3、format:此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype,opentype,truetype-aat,embedded-opentype,avg 等;
4、weight 和 style:weight 定义字体是否为粗体,style 主要定义字体样式,如斜体。
undefined
undefined
网上有许多免费的图标字体,可以下载到本地,这里到:下载字体,如下图所示:
undefined
undefined
解压后的字体如相关文件:
undefined
undefined
undefined
先将字体文件复制到项目的 font 文件夹中,CSS 样式如下:
undefined
- @font - face {
- font - family: 'iconfont';
- /*字体名称*/
- src: url('font/fontello.eot?53711433');
- /*字体文件路径*/
- src: url('font/fontello.eot?53711433#iefix') format('embedded-opentype'),
- url('font/fontello.woff2?53711433') format('woff2'),
- url('font/fontello.woff?53711433') format('woff'),
- url('font/fontello.ttf?53711433') format('truetype'),
- url('font/fontello.svg?53711433#fontello') format('svg');
- font - weight: normal;
- /*加粗*/
- font - style: normal;
- /*字形,如斜体*/
- }
undefined
undefined
找到对应的字体编码:
undefined
undefined
这里可以将 16 进制的字符编码换算成 10 进制,也可以使用 16 进制的 unicode 编码不过需要 x 开头,代码如下:
undefined
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- font-face
- </title>
- <style type="text/css">
- @font-face { font-family: 'iconfont'; /*字体名称*/ src: url('font/fontello.eot?53711433');
- /*字体文件路径*/ src: url('font/fontello.eot?53711433#iefix') format('embedded-opentype'),
- url('font/fontello.woff2?53711433') format('woff2'), url('font/fontello.woff?53711433')
- format('woff'), url('font/fontello.ttf?53711433') format('truetype'), url('font/fontello.svg?53711433#fontello')
- format('svg'); font-weight: normal; /*加粗*/ font-style: normal; /*字形,如斜体*/
- } .ok{ font-family: iconfont; font-size: 16px; color: blue; }
- </style>
- </head>
- <body>
- <i class="ok">
-
- </i>
- 赞
- <i class="ok">
-
- </i>
- 赞
- </body>
- </html>
undefined
运行结果:
undefined
undefined
上面的示例有一些不足,因为每一次都需要去查询编码,很麻烦,可以使用伪元素将内容直接写在 css 中,一直写入反复使用。简单改进后的代码如下:
undefined
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- font-face
- </title>
- <style type="text/css">
- @font-face { font-family: 'iconfont'; /*字体名称*/ src: url('font/fontello.eot?53711433');
- /*字体文件路径*/ src: url('font/fontello.eot?53711433#iefix') format('embedded-opentype'),
- url('font/fontello.woff2?53711433') format('woff2'), url('font/fontello.woff?53711433')
- format('woff'), url('font/fontello.ttf?53711433') format('truetype'), url('font/fontello.svg?53711433#fontello')
- format('svg'); font-weight: normal; /*加粗*/ font-style: normal; /*字形,如斜体*/
- } .icon { font-family: iconfont; font-style: normal; } .ok:after { content:
- '\e80d'; } .star:after { content: '\e804'; }
- </style>
- </head>
- <body>
- <p>
- <i class="icon ok">
- </i>
- 赞
- <i class="icon star">
- </i>
- 5分
- </p>
- <p>
- <i class="icon star">
- </i>
- <i class="icon star">
- </i>
- <i class="icon star">
- </i>
- </p>
- </body>
- </html>
undefined
运行结果:
undefined
undefined
IE8 下依然正常:
undefined
undefined
图标网站的 CSS 其实已经够用了:
undefined
View Code
- @font - face {
- font - family: 'fontello';
- src: url('../font/fontello.eot?53711433');
- src: url('../font/fontello.eot?53711433#iefix') format('embedded-opentype'),
- url('../font/fontello.woff2?53711433') format('woff2'),
- url('../font/fontello.woff?53711433') format('woff'),
- url('../font/fontello.ttf?53711433') format('truetype'),
- url('../font/fontello.svg?53711433#fontello') format('svg');
- font - weight: normal;
- font - style: normal;
- }
- /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
- /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
- /*
- @media screen and (-webkit-min-device-pixel-ratio:0) {
- @font-face {
- font-family: 'fontello';
- src: url('../font/fontello.svg?53711433#fontello') format('svg');
- }
- }
- */
- [class ^= "icon-"] : before,
- [class *= " icon-"] : before {
- font - family: "fontello";
- font - style: normal;
- font - weight: normal;
- speak: none;
- display: inline - block;
- text - decoration: inherit;
- width: 1em;
- margin - right: .2em;
- text - align: center;
- /* opacity: .8; */
- /* For safety - reset parent styles, that can break glyph codes*/
- font - variant: normal;
- text - transform: none;
- /* fix buttons height, for twitter bootstrap */
- line - height: 1em;
- /* Animation center compensation - margins should be symmetric */
- /* remove if not needed */
- margin - left: .2em;
- /* you can be more comfortable with increased icons size */
- /* font-size: 120%; */
- /* Font smoothing. That was taken from TWBS */
- - webkit - font - smoothing: antialiased; - moz - osx - font - smoothing: grayscale;
- /* Uncomment for 3D effect */
- /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
- }
- .icon - music: before {
- content: '\e800';
- }
- /* '' */
- .icon - search: before {
- content: '\e801';
- }
- /* '' */
- .icon - mail: before {
- content: '\e802';
- }
- /* '' */
- .icon - heart: before {
- content: '\e803';
- }
- /* '' */
- .icon - star: before {
- content: '\e804';
- }
- /* '' */
- .icon - user: before {
- content: '\e805';
- }
- /* '' */
- .icon - videocam: before {
- content: '\e806';
- }
- /* '' */
- .icon - camera: before {
- content: '\e807';
- }
- /* '' */
- .icon - photo: before {
- content: '\e808';
- }
- /* '' */
- .icon - attach: before {
- content: '\e809';
- }
- /* '' */
- .icon - lock: before {
- content: '\e80a';
- }
- /* '' */
- .icon - eye: before {
- content: '\e80b';
- }
- /* '' */
- .icon - tag: before {
- content: '\e80c';
- }
- /* '' */
- .icon - thumbs - up: before {
- content: '\e80d';
- }
- /* '' */
- .icon - pencil: before {
- content: '\e80e';
- }
- /* '' */
- .icon - comment: before {
- content: '\e80f';
- }
- /* '' */
- .icon - location: before {
- content: '\e810';
- }
- /* '' */
- .icon - cup: before {
- content: '\e811';
- }
- /* '' */
- .icon - trash: before {
- content: '\e812';
- }
- /* '' */
- .icon - doc: before {
- content: '\e813';
- }
- /* '' */
- .icon - note: before {
- content: '\e814';
- }
- /* '' */
- .icon - cog: before {
- content: '\e815';
- }
- /* '' */
- .icon - params: before {
- content: '\e816';
- }
- /* '' */
- .icon - calendar: before {
- content: '\e817';
- }
- /* '' */
- .icon - sound: before {
- content: '\e818';
- }
- /* '' */
- .icon - clock: before {
- content: '\e819';
- }
- /* '' */
- .icon - lightbulb: before {
- content: '\e81a';
- }
- /* '' */
- .icon - tv: before {
- content: '\e81b';
- }
- /* '' */
- .icon - desktop: before {
- content: '\e81c';
- }
- /* '' */
- .icon - mobile: before {
- content: '\e81d';
- }
- /* '' */
- .icon - cd: before {
- content: '\e81e';
- }
- /* '' */
- .icon - inbox: before {
- content: '\e81f';
- }
- /* '' */
- .icon - globe: before {
- content: '\e820';
- }
- /* '' */
- .icon - cloud: before {
- content: '\e821';
- }
- /* '' */
- .icon - paper - plane: before {
- content: '\e822';
- }
- /* '' */
- .icon - fire: before {
- content: '\e823';
- }
- /* '' */
- .icon - graduation - cap: before {
- content: '\e824';
- }
- /* '' */
- .icon - megaphone: before {
- content: '\e825';
- }
- /* '' */
- .icon - database: before {
- content: '\e826';
- }
- /* '' */
- .icon - key: before {
- content: '\e827';
- }
- /* '' */
- .icon - beaker: before {
- content: '\e828';
- }
- /* '' */
- .icon - truck: before {
- content: '\e829';
- }
- /* '' */
- .icon - money: before {
- content: '\e82a';
- }
- /* '' */
- .icon - food: before {
- content: '\e82b';
- }
- /* '' */
- .icon - shop: before {
- content: '\e82c';
- }
- /* '' */
- .icon - diamond: before {
- content: '\e82d';
- }
- /* '' */
- .icon - t - shirt: before {
- content: '\e82e';
- }
- /* '' */
- .icon - wallet: before {
- content: '\e82f';
- }
- /* '' */
undefined
undefined
有时候我们手上只有一个字体文件,但是 web font 为了兼容经常需要多个种格式支持,一般至少 2 种,一种要考虑 IE 浏览器,一种要考虑现代浏览器。可以使用如下的工具实现在线字体的转换,基本方法是将字体上传,在线服务的网站将一个字体文件变换成多个字体文件后下载。
undefined
常用的字体转换在线工具如下:
undefined
这里以为例,测试结果如下:
undefined
先下载字体,英文字体可以去下载,字体非常多,可以按需求搜索,这里下载了一款卡通 3D 字体。
undefined
将下载到的字体上传:
undefined
undefined
下载网站生成的内容解压,发现使用了 google 的 jQuery,需要替换,显示结果如下:
undefined
undefined
将字体引入到 web 项目中,先复制字体文件,再添加 css 样式,应用样式即可,示例代码如下:
undefined
View Code
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- 新字体
- </title>
- <style>
- @font-face { font-family: 'sketch3d'; src: url('font2/sketch_3d-webfont.eot');
- src: url('font2/sketch_3d-webfont.eot?#iefix') format('embedded-opentype'),
- url('font2/sketch_3d-webfont.woff2') format('woff2'), url('font2/sketch_3d-webfont.woff')
- format('woff'); font-weight: normal; font-style: normal; } span{ font:72px/100px
- sketch3d; color: lightcoral; }
- </style>
- </head>
- <body>
- <span>
- Hello Sketch 3D
- </span>
- </body>
- </html>
undefined
运行结果:
undefined
undefined
常用在线工具:
undefined
字体下载:
undefined
undefined
有时候我们手上有一个图标字体文件,但是不知道他的对应编码,在线工具可以检测到一些,但有时发现在线工具并不是能检测到所有的编码,使用工具:FontCreator,不仅可以创建自己的字体还可以查看字体的详细内容。
undefined
undefined
undefined
有些小的字体文件可以直接编码成 base64 将字符放在 css 文件中,让 css 直接解析,这种办法可以减少一些客户端的请求,图片与字体文件都可以这样做,如下所示:
undefined
undefined
第一步先将字体文件转换成 base64 的编码,当然也可以将 base64 的编码反向转换成字体文件,可以使用在线工具:
undefined
http://www.motobit.com/util/base64-decoder-encoder.asp
undefined
undefined
第二将编码复制到 css 文件中,剩下的步骤与前面使用 web font 就是一样的了,示例如下:
undefined
undefined
运行结果:
undefined
undefined
https://www.web-font-generator.com/
undefined
undefined
CSS Sprites 也就是通常说的 CSS 精灵,也有人称为雪碧图,是对网页中加载的图片的处理技术。在一个网页中可能有多张小的图片,如图标等,会向服务器发送多个请请求,请求数越多,服务器的压力就越大,精灵技术就是先将多张小的图片合并成一张图片,然后在 CSS 中分开为多张小图片的一种技术。如下图所示:
undefined
undefined
undefined
可以使用在线合并,也可以使用 photoshop 合并,更加省事的办法是使用一些小工具,如 "Css Sprite Tools"、"CSS Satyr",""
undefined
undefined
undefined
为了分离图片,需要先了解 background-position 属性:
undefined
作用:设置或检索对象的背景图像位置,必须先指定 <'background-image'> 属性
undefined
background-position:
默认值:0% 0%,效果等同于 left top
适用于:所有元素
center: 背景图像横向和纵向居中。
left: 背景图像在横向上填充从左边开始。
right: 背景图像在横向上填充从右边开始。
top: 背景图像在纵向上填充从顶部开始。
bottom: 背景图像在纵向上填充从底部开始。
undefined
示例代码:
undefined
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- CSS Sprite
- </title>
- <style type="text/css">
- #icon{ border: 1px solid blue; height: 500px; width: 1000px; background:
- url(img/x.png) no-repeat #fff; background-position: -150px -150px; }
- </style>
- </head>
- <body>
- <h2>
- CSS Sprite
- </h2>
- <div id="icon">
- </div>
- </body>
- </html>
undefined
没有偏移时的效果:
undefined
undefined
负向偏移时的效果:
undefined
undefined
根据上面的办法可以定位到图片的任何位置开始选择背景,可以通过 div 的大小控制将选择的图片高宽,示例如下:
undefined
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- CSS Sprite
- </title>
- <style type="text/css">
- #icon{ height: 64px; width: 56px; background: url(img/allbgs.png) no-repeat
- #fff; background-position: -128px 0; }
- </style>
- </head>
- <body>
- <h2>
- CSS Sprite
- </h2>
- <div id="icon">
- </div>
- </body>
- </html>
undefined
运行结果:
undefined
undefined
因为第一张图片与第二张小图片的宽度都是 64px,所以让大图向左边先移动 128 像素,Y 轴不需要动,其实生成合并图片的工具已经把 CSS 准备好了,脚本如下:
undefined
- .ban {
- background: url(.. / imgs / allbgs.png) no - repeat - 1px 0px;
- width: 64px;
- padding - top: 66px;
- }.basket {
- background: url(.. / imgs / allbgs.png) no - repeat - 64px 0px;
- width: 64px;
- padding - top: 66px;
- }.bell {
- background: url(.. / imgs / allbgs.png) no - repeat - 128px 0px;
- width: 56px;
- padding - top: 66px;
- }.anchor {
- background: url(.. / imgs / allbgs.png) no - repeat - 184px 0px;
- width: 52px;
- padding - top: 66px;
- }.archive {
- background: url(.. / imgs / allbgs.png) no - repeat - 236px 0px;
- width: 64px;
- padding - top: 66px;
- }.archive2 {
- background: url(.. / imgs / allbgs.png) no - repeat - 301px 0px;
- width: 64px;
- padding - top: 66px;
- }
undefined
不过,上面的 CSS 是可以优化的,可以将每个图标拆分成两个类样式。
undefined
undefined
CSS Sprites 非常值得学习和应用,特别是页面有很多很小的 icon(图标),但如果需要选择使用 CSS 精灵技术,你需要了解它的优缺点。
undefined
优点:
undefined
a)、利用 CSS Sprites 能很好地减少网页的 http 请求,从而大大的提高页面的性能,这也是 CSS Sprites 最大的优点,也是其被广泛传播和应用的主要原因;
undefined
b)、CSS Sprites 能减少图片的字节,曾经比较过多次 3 张图片合并成 1 张图片的字节总是小于这 3 张图片的字节总和。
undefined
c)、解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。
undefined
d)、更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。
undefined
缺点:
1. 在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好足够的空间,防止板块内出现不必要的背景;这些还好,最痛苦的是在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂;
undefined
2.CSS Sprites 在开发的时候比较麻烦,你要通过 photoshop 或其他工具测量计算每一个背景单元的精确位置。
undefined
3.CSS Sprites 在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片,无需改的地方最好不要动,这样避免改动更多的 CSS,如果在原来的地方放不下,又只能(最好)往下加图片,这样图片的字节就增加了,还要改动 CSS。
undefined
undefined
提示:使用字体文件时请尊重创作者的版权,商业应用应该更加慎重,不过还是有不少的开源字体库的。
来源: http://www.cnblogs.com/best/p/6132612.html