CSS3 @font-face屬性使用指南
發(fā)布時(shí)間：2014-12-12 15:01:57 作者：佚名 
我要評(píng)論
我要評(píng)論本文介紹了css3的屬性@font-face的使用方法，以及在@fant-face中使用字體化圖標(biāo)，有相同需求的小伙伴，自己參考下。
HTML
復(fù)制代碼
代碼如下:<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
復(fù)制代碼
代碼如下:<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 { 微軟開發(fā)用于嵌入網(wǎng)頁中的字體,IE專用字體; }
**WOFF { Web字體中最佳格式,被W3C推薦; }
**TTF { 由Microsoft和Apple聯(lián)合開發(fā)的一套字體標(biāo)準(zhǔn),是Mac OS和Win操作系統(tǒng)中最常見的的一種字體; }
**SVG { 用于SVG字體渲染的一種格式,是由W3C制定的開放標(biāo)準(zhǔn)的圖形格式; }
*/
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>
效果圖：
字體圖標(biāo)下載網(wǎng)站:Icomoon
相關(guān)文章
這篇文章主要介紹了深入理解CSS @font-face性能優(yōu)化，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-06CSS3用@font-face實(shí)現(xiàn)自定義英文字體
傳說中的CSS3基本上什么都可以，那么CSS3中可不可以自定義英文字體呢?答案是非常可以。用@font-face即可實(shí)現(xiàn)自定義英文字體，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以了解下2013-09-23什么是@font-face及font-face如何在css中使用
@ font-face的是一個(gè)CSS規(guī)則，允許你輸入自己的字體出現(xiàn)在網(wǎng)站上，即使在特定的字體在訪問者的計(jì)算機(jī)上沒有安裝,它也可以辦得到,在使用字體方面它真的很重要,您可以使用任2013-02-26CSS @font-face屬性實(shí)現(xiàn)在網(wǎng)頁中嵌入任意字體
下面要講的是如何只通過CSS的@font-face屬性來實(shí)現(xiàn)在網(wǎng)頁中嵌入任意字體。2009-12-11css常用樣式font設(shè)置字體的多種變換(實(shí)例詳解)
這篇文章主要介紹了css常用樣式font設(shè)置字體的多種變換,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-19- 這篇文章主要介紹了css中引入指定字體@font-face兼容各瀏覽器的問題,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-08
