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 选择器 属性选择器介绍
Jan 21 HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 HTML / CSS
HTML5中drawImage用法分析
Dec 01 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
Jul 19 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
完美实现CSS垂直居中的11种方法
Mar 27 HTML / CSS
CSS 圆形进度栏
Apr 06 HTML / CSS
POST提交数据常见的四种方式
Jan 18 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
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
基于php中使用excel的简单介绍
2013/08/02 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
JavaScript 字符串乘法
2009/08/20 Javascript
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
图片无缝滚动代码(向左/向下/向上)
2013/04/10 Javascript
js控制frameSet示例
2013/09/10 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
Python中使用不同编码读写txt文件详解
2015/05/28 Python
PyCharm使用之配置SSH Interpreter的方法步骤
2019/12/26 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
python opencv实现简易画图板
2020/08/27 Python
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
CSS3 @media的基本用法总结
2019/09/10 HTML / CSS
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
华三通信H3C面试题
2015/05/15 面试题
出生医学证明样本
2014/01/17 职场文书
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
特教教师先进事迹
2014/05/21 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
公民代理授权委托书
2014/09/24 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书