制作網(wǎng)站難免有些字體不是默認(rèn)的，得通過@font-face來加載自己特定的字體，來實(shí)現(xiàn)特定的文字效果。在本篇文章我將給大家介紹

@font-face免費(fèi)且常用方法并解釋各種方法的利弊，具體在自己的項(xiàng)目中怎么使用，還是的讀者自己去度量。

（1）CSS3@font-face
首先讓我們來談?wù)勗鷳B(tài)的方式來實(shí)現(xiàn)自定義網(wǎng)頁字體@font-face的方法，聲明一個自定義@font-face的CSS語法是很簡單的。基本上只要

你指定字體名和字體文件的路徑，一旦指定字體，你就可以將它應(yīng)用于任何元素。


@font-face {
??? font-family: "Custom Font Name"; //定義字體名
??? src: url('font.ttf'); //字體文件路徑
}
body {
??? font-family: "Custom Font Name";
}

但是不同的瀏覽器支持不同格式的字體，如 IE只支持EOT格式的字體，Firefox支持EOT和TTF格式，Safari支持OTF,TTF和SVG格式字體；顯

然我們網(wǎng)站也是要給IE瀏覽者的看的，所以上一種普通的方法顯然無法滿足我們要求，所以我們需要更為復(fù)雜并適合所有瀏覽器的方法


@font-face {
??? font-family: 'MyWebFont';
??? src: url('webfont.eot'); /* IE9*/
??? src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
???????? url('webfont.woff') format('woff'), /* Modern Browsers */
???????? url('webfont.ttf')? format('truetype'), /* Safari, Android, iOS */
???????? url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
??? }

這種方法呢優(yōu)勢是可以將字體放在自己的服務(wù)器上，任自己調(diào)試，但缺點(diǎn)是比較復(fù)雜，且需要將字體生成不同的格式（這里有個生成字體

格式的在線工具：http://www.fontsquirrel.com/fontface/generator）,字體加載慢

（2）google網(wǎng)頁字體
google網(wǎng)頁字體http://www.google.com/webfonts/unsupported.html無疑是網(wǎng)頁設(shè)計者的最佳幫手，只需加載簡簡單單的幾行代碼就可以

將字體應(yīng)用到自己的網(wǎng)頁中去；代碼如下


<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>

這種方法的優(yōu)勢很明顯加載快，輕量級且免費(fèi)，但也有不足之處就是大多數(shù)字體提供的樣式不多

總的來說不管怎么樣第二種方法是目前最適合的方法


線上制作字體地址：http://www.fontsquirrel.com/fontface/generator

總結(jié)

以上是生活随笔為你收集整理的在线字体转换的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。