利用@font-face加载Web字体_html/css_WEB-ITnose
@font-face用于自定义字体样式,从服务器端取得字体样式,使浏览器可以显示客户端并不存在的样式效果,给用户带来更好的展示体验。
@font-face并不是CSS3的新特性,早在98年就被写入CSS2的规范当中,目前在IE6都可支持。
2.语法
@font-face { font-family:; //自定义的字体名称 src:
由于各个浏览器对字体文件支持格式不同,所以我们一般引用多个格式的字体文件( 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.fontsquirrel.com/tools/webfont-generator 字体转换工具
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中使用则需加 ,这个原理是将其转化为html实体。以下两个span的显示效果是相同的。
✉
OK,That's all,欢迎吐槽。
推荐阅读
-
Bootstrap组件之Glyphicons字体图标_html/css_WEB-ITnose
-
requireJS在同一个HTML/JSP页面,加载不同版本的jquery_html/css_WEB-ITnose
-
解决Web部署 svg/woff/woff2字体 404错误_html/css_WEB-ITnose
-
如何使用SVG生成超酷的页面预加载素描动画效果_html/css_WEB-ITnose
-
2个网页调用同一个css,为什么有一个网页字体显示不出来_html/css_WEB-ITnose
-
模拟实现ajax加载框_html/css_WEB-ITnose
-
请教一个CSS的问题,怎么样才能实现小字体也能抗锯齿啊?象DELL网站就完全没锯齿_html/css_WEB-ITnose
-
网页字体知识_html/css_WEB-ITnose
-
请问这是什么字体,帮写下CSS呗!!!_html/css_WEB-ITnose
-
CSS3动画实现loading加载图标_html/css_WEB-ITnose