WebFont-前端字體

前端設計時使用了一些不常用的字體，如何在客戶的瀏覽器中正確展示？
解決方案是使用webfont，將字體置於服務端，利用 css 中的font-family進行設置，客戶端展現時加載到瀏覽器中。

WebFont

webfont一般使用 4 種格式，即 eot / svg / ttf / woff

1 首先需要定義字體：

@font-face {

font-family:'fzztjw';

src: url('../fonts/fzztjw-webfont.eot');

src: url('../fonts/fzztjw-webfont.eot?#iefix') format('embedded-opentype'),

url('../fonts/fzztjw-webfont.woff') format('woff'),

url('../fonts/fzztjw-webfont.ttf') format('truetype'),

url('../fonts/fzztjw-webfont.svg#ekcososregular') format('svg');

font-weight: normal;

font-style: normal;

}

　　

 

2 然后就可以在css中使用了（方正藏體簡體）：
  font-family: 'fzztjw'
  效果如下：
  

字體轉換

我們通常獲得的字體是ttf格式，如何獲取到其他的格式？
利用在線轉換網站進行轉換就OK了，推薦 fontsquirrel.

1. 上傳 ttf 格式字體文件
   

2. 設置
   不同的設置生成的字體稍有差異，多試幾次
   

3. 下載字體
   

4. 解壓，拷貝到webapp下
   
   css 可以拷貝stylesheet.css中的

來自為知筆記(Wiz)