font-face小抄

font-face已經有很多瀏覽器支持瞭,這裡簡單介紹一下如何使用:

1. 使用工具定義你想要的圖片和編碼:use a tool (www.aiwalls.com) to create font file: select a image and a utf8 code for it

2. 定義font-face in css
@font-face {
font-family: 'IcoMoon';
src: url('fonts/IcoMoon.eot');
src: url('fonts/IcoMoon.eot?#iefix') format('embedded-opentype'),
url('fonts/IcoMoon.svg#IcoMoon') format('svg'),
url('fonts/IcoMoon.woff') format('woff'),
url('fonts/IcoMoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

3. 如何使用,0021就是之前定義吧編碼:how to use it
[data-icon]:before {
font-family: 'IcoMoon';
content: "\0021";
speak: none;
}
作者:baoeni

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *