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实现背景模糊的三种方式
Mar 09 HTML / CSS
详解使用CSS3的@media来编写响应式的页面
Nov 01 HTML / CSS
CSS3五个技巧给你的网站带来出色的效果
Apr 02 HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
CSS3实现鼠标悬停显示扩展内容
Aug 24 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
html5中valid、invalid、required的定义
Feb 21 HTML / CSS
极简的HTML5模版
Jul 09 HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
Aug 05 HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
May 07 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
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
Linux基于php-fpm模式的lamp搭建phpmyadmin的方法
2018/10/25 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
javascript:以前写的xmlhttp池,代码
2008/05/18 Javascript
JQuery学习笔记 nt-child的使用
2011/01/17 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
jquery弹出层类代码分享
2013/12/27 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
canvas知识总结
2017/01/25 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
在python中的socket模块使用代理实例
2014/05/29 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
老海军美国官网:Old Navy
2016/09/05 全球购物
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
sort命令的作用和用法
2013/08/25 面试题
机械专业应届生求职信
2013/09/21 职场文书
小学毕业寄语大全
2014/04/03 职场文书
团日活动总结范文
2014/04/25 职场文书
2014年镇党建工作汇报材料
2014/11/02 职场文书
2014年防汛工作总结
2014/12/08 职场文书
个人先进材料范文
2014/12/30 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
太行山上观后感
2015/06/05 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技