制作網站難免有些字體不是默認的，得通過@font-face來加載自己特定的字體，來實現特定的文字效果。在本篇文章我將給大家介紹

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

（1）CSS3@font-face
首先讓我們來談談原生態的方式來實現自定義網頁字體@font-face的方法，聲明一個自定義@font-face的CSS語法是很簡單的。基本上只要

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


@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格式字體；顯

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


@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 */
??? }

這種方法呢優勢是可以將字體放在自己的服務器上，任自己調試，但缺點是比較復雜，且需要將字體生成不同的格式（這里有個生成字體

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

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

將字體應用到自己的網頁中去；代碼如下


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

這種方法的優勢很明顯加載快，輕量級且免費，但也有不足之處就是大多數字體提供的樣式不多

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


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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。