如何讓網頁自帶特殊字體

    爲了讓網頁更美觀、更有個性，咱們一般須要在網頁中使用一些網上下載下來的字體，由於系統自帶的字體可選擇的餘地早已沒法知足人們對審美的要求。

怎麼用？用戶的電腦又沒有安裝你指望的那種字體。作成圖片是能夠，不過不方便修改啊，不能大幅度使用啊，不利於SEO啊，速度也比較慢點啊等等一大堆弊端。怎麼辦？別急，咱們用CSS。CSS有這麼一種優秀的功能，就是能夠自定義字體。下面正式進入正題：

CSS自定義字體，讓你的字體運用爲所欲爲！

步驟：

一、下載所需字體。字體下載站提供的字體通常爲.TTF格式。

二、字體轉格式。爲了確保在主流瀏覽器中都能正常顯示該字體，須要提供3種字體格式。咱們能夠拿下載下來的.TTF文件去轉換獲得另外兩種格式的字體。字體文件格式的轉換能夠經過網站FontsQuirrel或 onlinefontconverter提供的在線字體轉換服務獲取。

• .TTF或.OTF 適用於Firefox 3.五、Safari、Opera
• .EOT 適用於Internet Explorer 4.0+
• .SVG 適用於Chrome、IPhone

三、使用@font-face定義字體。若是你是在fontsquirrel.com進行的字體轉換，那麼連定義字體的步驟均可以避免了。轉換之後他會提供一個下載包，裏面包含須要的字體格式和定義好字體樣式的CSS文件stylesheet.css，還有一個供查看字體的demo.html文件。把字體和stylesheet.css拷貝到你的CSS文件夾目錄裏面就能夠調用了。如何生成的樣式不能知足你的要求，能夠本身修改。

四、在html裏面調用CSS。

附： CSS字體聲明：

@font-face {
font-family: ‘fontNameRegular’;
src: url(’fontName.eot’);
src: local(’fontName Regular’),
local(’fontName’),
url(’fontName.woff’) format(’woff’),
url(’fontName.ttf’) format(’truetype’),
url(’fontName.svg#fontName’) format(’svg’);
}
/*其中fontName替換爲你的字體名稱*/

在頁面中須要的地方使用該字體：

p { font: 13px fontNameRegular, Arial, sans-serif; }
h1{font-family: fontNameRegular}

然而，博客園並不能上傳字體文件，上傳到別的網盤什麼的好像並不知道這個url什麼的，這就很尷尬了呀。