首頁 > 開發者 > JavaScript

css3 @font-face，css3

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

css3 @font-face，css3

很長時間，web設計師總是得用一些“web-safe”字型，現在@font-face能夠載入伺服器端的字型檔，讓瀏覽器端可以顯示使用者電腦裡沒有安裝的字型。

原理是：字型檔放到web伺服器，在需要的時候被自動下載到使用者的電腦上。

一、@font-face介紹

文法：

@font-face {      font-family: <YourWebFontName>;      src: <source> [<format>][,<source> [<format>]]*;      [font-weight: <weight>];      [font-style: <style>];    }

參數說明：

YourWebFontName:此值為你自己定義的字型名稱，最好是使用你下載的預設字型名稱，它將被引用到你的web元素的font-family屬性中。

source:自訂字型的存放路徑，可以是相對路徑或絕對路徑。

format:指自訂字型的格式，主要用來協助瀏覽器識別，其值有以下幾種類型：truetype,opentype,truetype-aat,embedded-opentype,avg等。

font-weight和和font-style就是定義字型是否為粗體，和字型樣式。

瀏覽器安全色寫法：

 @font-face {                                font-family: 'YourWebFontName';                                src: url('YourWebFontName.eot'); /* IE9 Compat Modes */                                src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */                                            url('YourWebFontName.woff') format('woff'), /* Modern Browsers */                                            url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */                                            url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */                         }
二、使用方法

1、下載特殊字型

比如我要下載single-malta.font這個字型，下載字型連結為

http://www.dafont.com/single-malta.font

下載解壓後可以看到一個ttf檔案。

2、用第三方工具產生@font-face所需字型格式，即.eot,.woff,.ttf,.svg字型格式：

第三方工具鏈接：http://www.fontsquirrel.com/fontface/generator

具體步驟是在WEBFONT GENERATOR頁面上傳第一步下載的字型，然後下載解壓。

下載解壓後發現檔案夾有很多多餘的demo頁面和css，我們只需要.woff,.ttf,.svg,.eof四個檔案。把這四個檔案複製到網站的fonts目錄。現在準備工作已經完成了。

3、在style.css中添加@font-face相關代碼。

4、現在就可以在樣式中用font-familyl。

代碼如下：

<style type="text/css">@font-face {    font-family: 'SingleMaltaRegular';    src: url(fonts/singlemalta-webfont.eot);    src: url(fonts/singlemalta-webfont.svg#SingleMaltaRegular)format('svg'),         url(fonts/singlemalta-webfont.ttf)format('truetype'),           url(fonts/singlemalta-webfont.woff)format('woff'),           url(fonts/singlemalta-webfont.eot?#iefix)format('embedded-opentype');    font-weight: normal;    font-style: normal;}h2.singleMalta {    font-family: 'SingleMaltaRegular'}</style><body><h2>普通字型</h2><h2 class="singleMalta">single malta</h2></body>

效果：

三、資源連結

網頁中匯入特殊字型@font-face屬性詳解

http://www.w3cfuns.com/thread-5597432-1-1.html

擷取字型

http://www.google.com/fonts/http://www.dafont.com/

第三方產生字型工具

http://www.fontsquirrel.com/fontface/generator

 


 

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

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： 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