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 background-image颜色渐变的实现代码
Sep 13 HTML / CSS
CSS3 box-sizing属性
Apr 17 HTML / CSS
CSS3实现的炫酷菜单代码分享
Mar 12 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 HTML / CSS
Css3新特性应用之视觉效果实例
Dec 12 HTML / CSS
HTML5通用接口详解
Jun 12 HTML / CSS
HTML5之语义标签介绍
Jul 07 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
HTML5公共页面提取作为公用代码的方法
Jun 30 HTML / CSS
css常用字体属性与背景属性介绍
Feb 28 HTML / CSS
HTML中的表单元素介绍
Feb 28 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
PHP4(windows版本)中的COM函数
2006/10/09 PHP
PHP 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
IE php关于强制下载文件的代码
2008/08/23 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
浅谈Javascript事件模拟
2012/06/27 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
React如何避免重渲染
2018/04/10 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
小程序实现录音功能
2020/09/22 Javascript
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
flask session组件的使用示例
2018/12/25 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
pandas 时间格式转换的实现
2019/07/06 Python
使用python实现学生信息管理系统
2021/02/25 Python
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
你懂得怎么写自荐信吗?
2013/12/27 职场文书
《放小鸟》教学反思
2014/04/20 职场文书
关于安全演讲稿
2014/05/09 职场文书
二年级学生期末评语
2014/12/26 职场文书
世界气象日活动总结
2015/02/27 职场文书
中学生自我评价范文
2015/03/03 职场文书
研讨会通知
2015/04/27 职场文书
Java数组与堆栈相关知识总结
2021/06/29 Java/Android
Nginx的基本概念和原理
2022/03/21 Servers