码迷,mamicode.com
首页 > Web开发 > 详细

利用@font-face加载Web字体

时间:2015-05-31 18:23:01      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:

 
1.简介
 
     @font-face用于自定义字体样式,从服务器端取得字体样式,使浏览器可以显示客户端并不存在的样式效果,给用户带来更好的展示体验。
     @font-face并不是CSS3的新特性,早在98年就被写入CSS2的规范当中,目前在IE6都可支持。
 
2.语法
  
@font-face {
    font-family: <FontName>;       //自定义的字体名称
    src: <source> [<format>][,<source> [<format>]]*;      //字体文件路径
    [font-weight: <weight>];     //是否加粗
    [font-style: <style>];     //是否斜体
}

 

  由于各个浏览器对字体文件支持格式不同,所以我们一般引用多个格式的字体文件(eot\woff\ttf\svg),font-weight用于设置字体粗细,font-style用于设置是否是斜体。
  Tip:一般我们容易得到的字体文件是ttf格式的,可以通过http://www.fontsquirrel.com/tools/webfont-generator 将ttf转换为其他几种字体。
 
3.实践效果:
 
技术分享
 
Demo下载(第二种效果字体文件略大)
 
4.相关资料
 
https://icomoon.io/  利用图标制作图片
http://www.dafont.com/     字体库
http://www.w3cplus.com/content/css3-font-face/   font-face详解(非常详细,推荐)
 
5.Bootstrap中的@font-face
 
  Bootstrap2.x中的glyphicon组件是利用CSS Spirit实现小图标的展示效果,到了3.x改用@font-face实现,源码如下:
 
@font-face {     //引入字体文件
  font-family: ‘Glyphicons Halflings‘;
  src: url(‘../fonts/glyphicons-halflings-regular.eot‘);
  src: url(‘../fonts/glyphicons-halflings-regular.eot?#iefix‘) format(‘embedded-opentype‘), url(‘../fonts/glyphicons-halflings-regular.woff2‘) format(‘woff2‘), url(‘../fonts/glyphicons-halflings-regular.woff‘) format(‘woff‘), url(‘../fonts/glyphicons-halflings-regular.ttf‘) format(‘truetype‘), url(‘../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular‘) format(‘svg‘);
}
.glyphicon {    //基础样式
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: ‘Glyphicons Halflings‘;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

//小图标内容设置
.glyphicon-cloud:before {
  content: "\2601";
}
.glyphicon-envelope:before {
  content: "\2709";
}
……共计200+图标样式(具体可参考 http://v3.bootcss.com/components/)

 

  可以注意到,这里都是用content:""设置的,应用时给相应元素(一般为span或ul)加上“glyphicon glyphicon -***”类即可。多说一句,如果不利用before伪元素的特性,如何在普通文本上显示小图标呢?这里content内的字符默认是保存在Unicode Private Use Area(即用户自定义字符区域)中的,如果要在HTML中使用则需加&#x,这个原理是将其转化为html实体。以下两个span的显示效果是相同的。
     <span class="glyphicon glyphicon-envelope"></span>
     <span class="glyphicon">&#x2709</span>
 
  OK,That‘s all,欢迎吐槽。
 

利用@font-face加载Web字体

标签:

原文地址:http://www.cnblogs.com/mengda1027/p/4542213.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!