字體轉換網站:[http://www.fontsquirrel.com/tools/webfont-ge](http://www.fontsquirrel.com/tools/webfont-ge)?
可以將字體轉換為網頁兼容格式字體eot,otf,svg,wotf
新項目中需要使用:造字工坊悅黑字體,該字體并非主流操作系統的內置字體,使用font-family屬性無法實現。但是可以通過CSS3的@font-face實現。
1、使用CSS的@font-face首先需要獲取要使用的字體的三種文件格式,確保能在主流瀏覽器中正常顯示該字體。?
.ttf或.otf(適用于 Firefox3.5、Safari、Opera)?
.eot(適用于IE4+)?
.svg(適用于Chrome、Iphone)?
聲明一個名為missYuan的字體.?
在網上下載好字體后,通常是otf格式,然后通過字體轉換網站進行格式轉換
2、在樣式表中聲明該字體。
~~~
@font-face {?
font-family: ‘rtws_yuegothic_triallight’;?
src: url(‘missyuan-webfont.eot’);?
src: url(‘missyuan-webfont.eot?#iefix’) format(‘embedded-opentype’),?
url(‘missyuan-webfont.woff2’) format(‘woff2’),?
url(‘missyuan-webfont.woff’) format(‘woff’),?
url(‘missyuan-webfont.ttf’) format(‘truetype’),?
url(‘missyuan-webfont.svg#rtws_yuegothic_triallight’) format(‘svg’);?
font-weight: normal;?
font-style: normal;?
}?
~~~
3、在需要的地方使用該字體?
如p{font-size:24px;font-weight:bold;}
- 前言
- jQuery輪播圖插件
- JS模擬事件操作
- JS閉包與變量
- JS綁定事件
- HTML5之file控件
- JavaScript的this詞法
- JavaScript的this詞法(二)
- JS this詞法(三)
- JS檢測瀏覽器插件
- JS拖拽組件開發
- number輸入框
- Modernizr.js和yepnode.js
- DOM變化后事件綁定失效
- div和img之間的縫隙問題
- 詳解JavaScript作用域
- bootstrap入門
- 表單驗證(登錄/注冊)
- Bootstrap網格系統
- Bootstrap排版
- Bootstrap創建表單(一)
- Bootstrap表單(二)
- Bootstrap按鈕
- Bootstrap圖片
- Bootstrap字體圖標(glyphicons)
- Bootstrap的aria-label和aria-labelledby
- Bootstrap下拉菜單
- Bootstrap按鈕組
- Bootstrap按鈕菜單
- Bootstrap輸入框組
- Bootstrap導航元素
- Bootstrap導航欄
- sublimeText頻頻崩潰
- JQuery不同版本的差異(checkbox)
- Bootstrap面包屑導航、分頁、標簽、徽章
- Bootstrap警告
- Bootstrap進度條
- 前端的上傳下載
- JS字符串的相關方法
- CSS3選擇器(全)
- CSS3新增文本屬性詳述
- 利用CSS3實現圖片切換特效
- CSS3新增顏色屬性
- CSS3的border-radius屬性詳解
- JS創建對象幾種不同方法詳解
- JS實現繼承的幾種方式詳述(推薦)
- CSS3響應式布局
- JS模塊化開發(requireJS)
- 利用@font-face實現個性化字體
- 前端在html頁面之間傳遞參數的方法
- CSS自動換行、強制不換行、強制斷行、超出顯示省略號
- 如何在Html中引入外部頁面
- reactJS入門
- React組件生命周期
- 使用React實現類似快遞單號查詢效果
- ReactJS組件生命周期詳述
- React 屬性和狀態詳解