深圳公司網站建設_深圳公司網站自然排名優化首選壹網互聯!
當前位置
首頁 - 前端Js+Css教程 - 網頁設計中如何調用外部字體

網頁設計中如何調用外部字體

發布時間:2017-11-24 閱讀:1586

 字體使用是網頁設計中不可或缺的一部分。網頁是文字的載體,我們希望在網頁中使用某一特定字體,但是該字體并非主流操作系統的內置字體,這樣用戶在瀏覽頁面的時候就有可能看不到真實的設計。
  美工設計師最常做的辦法是把想要的文字做成圖片,這樣做有幾個明顯缺陷:
  一、不可能大范圍的使用該字體;
  二、圖片內容相對使用文字不易修改;
  三、不利于網站SEO。
  網絡上有一些使用sIFR技術、或javascript/flash hack的方法,但實現起來或繁瑣,或有缺陷。下面要講的是如何只通過CSS的@font-face屬性來實現在網頁中嵌入任意字體。

  首先 
  獲取要使用字體的三種文件格式,確保能在主流瀏覽器中都能正常顯示該字體。 

.TTF或.OTF,適用于Firefox 3.5、Safari、Opera 
.EOT,適用于Internet Explorer 4.0+ 
.SVG,適用于Chrome、IPhone

瀏覽器兼容性一覽

使用CSS3的@font-face屬性可以實現在網頁中嵌入任意字體,但是IE只支持微軟自有的EOT格式字體,而其他瀏覽器都不支持這一字體格式,其它瀏覽器可以設置TTF(TrueType)和OTF(OpenType)兩種字體作為自定義字體,瀏覽器對@font-face屬性及各種字體格式支持詳的細情況如下:

 

Browser@font-faceTrueTypeWOFFEOTSVGSVGZ
4+9+9+4+

3.5+3.5+3.6+


4+4+6+
4+6+
3.1+3.1+6+
3.1+3.1+
10+10+11.1+
10+10+

 

  下面要解決的是如何獲取到某種字體的這三種格式文件。一般地,我們在手頭上(或在設計資源站點已經找到)有該字體的某種格式文件,最常見的是.TTF 文件,我們需要通過這種文件格式轉換為其余兩種文件格式。字體文件格式的轉換可以通過網站FontsQuirrel或 onlinefontconverter提供的在線字體轉換服務獲取。這里推薦第一個站點,它允許我們選擇需要的字符生成字體文件(在服務的最后一個選項),這樣就大大縮減了字體文件的大小,使得本方案更具實用性。 

然后
  獲取到三種格式的字體文件后,下一步要在樣式表中聲明該字體,并在需要的地方使用該字體。 
  字體聲明如下: 

  1. <style type="text/css">  

  2. @font-face {  

  3.  font-family: MyCustomFont;  

  4.  srcurl("Quasart.eot"/* EOT file for IE */  

  5. }  

  6. @font-face {  

  7.  font-family: MyCustomFont;  

  8.  srcurl("Quasart.ttf"/* TTF file for CSS3 browsers */  

  9. }  

  10. </style>   

  11. /*其中fontName替換為你的字體名稱 - www.86y.org*/  




  1. p { font13px MyCustomFont, Arialsans-serif;}  

  2. h1{font-family: MyCustomFont} 


或者

<p style="font-family: MyCustomFont">態度決定一切</p> 

好了介紹完了,自己好好體會下吧




注意:相關資料:網頁字體下載工具可以參考這篇文章:http://www.yiwanghulian.com/shejigongju/192.html

  • 評論內容:

◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

聯系我們
CONTACT US

深圳網站建設電話:13510778477 姚先生

深圳網站推廣電話:13715035554 劉先生

地址:深圳市南山區西麗鎮龍珠五路南汾大廈416

广东11选5奇偶走势图