今天在瀏覽乙個**的時候，發現了一款非常好看的字型，審查元素發現，這個字型叫open sans，非常驚豔。和我以前發現的一款字型segoe ui非常像。對比了一下，其實都很不錯，而且很相像。於是google了下，竟然發現其實這兩款字型出自同一人steve matteson之手！真是大神級的人物。看來的我的欣賞水平還沒有跑偏。
不同的是，segoe ui屬於微軟的東西，付費，而open sans是免費的。
剛好自己最近在做**開發，於是就想把這款字型嵌入到自己正在做的網頁裡。今天就寫一下怎麼把一款字型嵌入到自己的網頁中。
其實在css中，使用font-family這個屬性就直接可以將網頁的字型設定成想要的。但是有個前提是，你所使用的某種特定的字型系列，在網頁中是否能顯示，完全取決於使用者機器上該字型系列是否可用。如果使用者機器上沒有這種字型，那就會變成預設的字型。
所以，為了保證可以在每一台機器上都能顯示，把一款字型嵌進網頁是乙個不錯的選擇。當然僅限於西方字型，如果是漢語的話，字型會很龐大，每次載入字型就會浪費使用者很長的時間和很多的流量。
.ttf字型是windows和mac的最常見的字型，是一種raw格式，因此他不為**優化,支援這種字型的瀏覽器有ie9+,firefox3.5+,chrome4+,safari3+,opera10+,ios mobile safari4.2+
.otf字型被認為是一種原始的字型格式，其內建在turetype的基礎上，所以也提供了更多的功能,支援這種字型的瀏覽器有firefox3.5+,chrome4.0+,safari3.1+,opera10.0+,ios mobile safari4.2+
.woff字型是web字型中最佳格式，他是乙個開放的truetype/opentype的壓縮版本，同時也支援元資料報的分離,支援這種字型的瀏覽器有ie9+,firefox3.5+,chrome6+,safari3.6+,opera11.1+
.eot字型是ie專用字型，可以從truetype建立此格式字型,支援這種字型的瀏覽器有ie4+
所以這就意味著，我們至少需要.svg字型是基於svg字型渲染的一種格式,支援這種字型的瀏覽器有chrome4+,safari3.1+,opera10.0+,ios mobile safari3.2+
.woff,.eot兩種格式字型，甚至還需要.svg等字型達到更多種瀏覽版本的支援。
在css**中，我們主要使用的是font-face這個屬性，它的主要功能就是把自己定義的web字型嵌入到網頁中。
首先我們來看看@font-face的語法規則：
@font-facefont-family：設定文字的字型名稱。
font-style： 設定文字樣式。
font-variant：設定文字是否大小寫。
font-weight：設定文字的粗細。
font-stretch：設定文字是否橫向的拉伸變形。
font-size：設定文字字型大小。
src：設定自定義字型的相對路徑或者絕對路徑，注意，此屬性只能在@font-face規則裡使用。
@font-facebody如何在網頁中引用CSS
如何在網頁中引用css?2006 11 21 17 42 如何在網頁中引用css?初學css的一般都對如何在網頁中使用css感到特別困惑，在這裡我把常用的方法介紹給大家，以解大家心頭之惑 1 使用embed 嵌入樣式單 排版樣式 即將css 直接插入每個頁面的html的 說明 css檔案的路徑用絕對...
如何在網頁中插入CSS
1.鏈入外部樣式表 上面這個例子表示瀏覽器從mystyle.css檔案中以文件格式讀出定義的樣式表。rel stylesheet 是指在頁面中使用這個外部的樣式表。type text css 是指檔案的型別是樣式表文字。href mystyle.css 是檔案所在的位置。media是選擇 型別，這些...
在網頁中自定義字型
最近切圖遇到了，psd文件與網頁字型的衝突。很多字型，系統中都沒有安裝。在同事和網路的幫助下解決了這個問題.發此文以表感謝，外加自我提醒。一 使用google webfont字型，網上資料很多，在這裡就不仔細描述了。二 如果goole字型中沒有，請看下面的方法 大體步驟 ttf或.otf 適用於fi...