@font-face 用字型畫表徵圖，@font-face字型

最後更新：2014-12-11 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

HTML

 1 <body> 2     <!-- ul.layout>li*5>a[href=#]>i.icon --> 3     <!-- Sublime Text 快捷拼字 --> 4     <ul class="layout"> 5         <li><a href="#"><i class="icon">&#xe601;</i></a></li> 6         <li><a href="#"><i class="icon">&#xe600;</i></a></li> 7         <li><a href="#"><i class="icon">&#xe602;</i></a></li> 8         <li><a href="#"><i class="icon">&#xe603;</i></a></li> 9         <li class="last-child"><a href="#"><i class="icon">&#xe604;</i></a></li>10         <div class="clear"></div>11     </ul>12 </body>

CSS

 1 <style> 2         * {margin:0; padding:0;} 3         body { background-color: #fc0; padding-top: 50px;} 4         ul li { list-style: none;} 5         a { text-decoration: none;} 6         .clear { clear:both;} 7         .layout { width:604px; margin:0 auto;} 8         .layout li { display: block; float: left; border-right: 1px solid #930808; } 9         .layout li.last-child { border-right: none;}10         .layout li a { display: block; width: 120px; height:120px; line-height: 120px; text-align: center; background-color: #f00;}11         .layout li a i { color:#fc0;}12         .layout li a:hover i { color:#fff;}13         @font-face {14             font-family: "icomoon";15             src:url('fonts/icomoon.eot?-9731bi');16                 /*↑相容IE9相容模式開啟IE8及其以下瀏覽器可以顯示;*/17                 /*↓相容IE9可以顯示;*/18             src:url("fonts/icomoon.eot?#iefix") format("embedded-opentype"),19                 url("fonts/icomoon.woff") format("woff"),20                 url("fonts/icomoon.ttf") format("truetype"),21                 url("fonts/icomoon.svg") format("svg");22             /*EOT { 微軟開發用於嵌入網頁中的字型,IE專用字型; }23             **WOFF { Web字型中最佳格式,被W3C推薦; }24             **TTF { 由Microsoft和Apple聯合開發的一套字型標準,是Mac OS和Win作業系統中最常見的的一種字型; }25             **SVG { 用於SVG字型渲染的一種格式,是由W3C制定的開放標準的圖形格式; }26             */27             font-weight: normal;28             font-style: normal;29         }30         .icon {31             font-family: "icomoon";32             font-style: normal;33             font-weight: normal;34             font-size: 90px;35             -webkit-font-smoothing: antialiased;36             -moz-osx-font-smoothing: grayscale;37             /*消除鋸齒屬性*/38         }39 </style>

SHOW

字型表徵圖下載網站:Icomoon

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

@font-face 用字型畫表徵圖，@font-face字型

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support