CSS3 @font-face属性使用指南


Posted in HTML / CSS onDecember 12, 2014

HTML

复制代码
代码如下:

<body>
<!-- ul.layout>li*5>a[href=#]>i.icon -->
<!-- Sublime Text 快捷拼写 -->
<ul class="layout">
<li><a href="#"><i class="icon"></i></a></li>
<li><a href="#"><i class="icon"></i></a></li>
<li><a href="#"><i class="icon"></i></a></li>
<li><a href="#"><i class="icon"></i></a></li>
<li class="last-child"><a href="#"><i class="icon"></i></a></li>
<div class="clear"></div>
</ul>
</body>

CSS

复制代码
代码如下:

<style>
* {margin:0; padding:0;}
body { background-color: #fc0; padding-top: 50px;}
ul li { list-style: none;}
a { text-decoration: none;}
.clear { clear:both;}
.layout { width:604px; margin:0 auto;}
.layout li { display: block; float: left; border-right: 1px solid #930808; }
.layout li.last-child { border-right: none;}
.layout li a { display: block; width: 120px; height:120px; line-height: 120px; text-align: center; background-color: #f00;}
.layout li a i { color:#fc0;}
.layout li a:hover i { color:#fff;}
@font-face {
font-family: "icomoon";
src:url('fonts/icomoon.eot?-9731bi');
/*↑兼容IE9兼容模式打开IE8及其以下浏览器可以显示;*/
/*↓兼容IE9可以显示;*/
src:url("fonts/icomoon.eot?#iefix") format("embedded-opentype"),
url("fonts/icomoon.woff") format("woff"),
url("fonts/icomoon.ttf") format("truetype"),
url("fonts/icomoon.svg") format("svg");
/*EOT { 微软开发用于嵌入网页中的字体,IE专用字体; }
**WOFF { Web字体中最佳格式,被W3C推荐; }
**TTF { 由Microsoft和Apple联合开发的一套字体标准,是Mac OS和Win操作系统中最常见的的一种字体; }
**SVG { 用于SVG字体渲染的一种格式,是由W3C制定的开放标准的图形格式; }
*/
font-weight: normal;
font-style: normal;
}
.icon {
font-family: "icomoon";
font-style: normal;
font-weight: normal;
font-size: 90px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/*抗锯齿属性*/
}
</style>

效果图:

CSS3 @font-face属性使用指南

字体图标下载网站:Icomoon

HTML / CSS 相关文章推荐
CSS3中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
网页布局中CSS样式无效的十个重要原因详解
Aug 10 HTML / CSS
CSS3结构性伪类选择器九种写法
Apr 18 HTML / CSS
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
html5触摸事件判断滑动方向的实现
Jun 05 HTML / CSS
html5 input属性使用示例
Jun 28 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 HTML / CSS
详解CSS不定宽溢出文本适配滚动
May 24 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 HTML / CSS
CSS3简单实现照片墙
Dec 12 #HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 #HTML / CSS
一款利用纯css3实现的win8加载动画的实例分析
Dec 11 #HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 #HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 #HTML / CSS
CSS3动画效果回调处理详解
Dec 10 #HTML / CSS
CSS3属性background-size使用指南
Dec 09 #HTML / CSS
You might like
用PHP制作静态网站的模板框架(二)
2006/10/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十)
2014/06/24 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
javascript 学习之旅 (3)
2009/02/05 Javascript
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
js 多浏览器分别判断代码
2010/04/01 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
Python求离散序列导数的示例
2019/07/10 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
运动会通讯稿500字
2014/02/20 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
聘用意向书范本
2014/04/01 职场文书
产品委托授权书范本
2014/09/16 职场文书
校运会加油稿大全
2015/07/22 职场文书
创业计划书之废品回收
2019/09/26 职场文书
python3实现常见的排序算法(示例代码)
2021/07/04 Python