@font-face

首先?
獲取要使用字體的四種文件格式，確保能在主流瀏覽器中都能正常顯示該字體。?

.TTF或.OTF，適用于Firefox?3.5、Safari、Opera?

.EOT，適用于Internet?Explorer?4.0+?

.SVG，適用于Chrome、AndRoid、IPhone

.woff，適用于Chrome 6，Firefox3，ie9+，opare11。

woff是最新的web開放字體格式(web open font format)，w3c推薦，主要優(yōu)勢(shì)是針對(duì)瀏覽器進(jìn)行優(yōu)化，字體文件小。

下面要解決的是如何獲取到某種字體的這三種格式文件。一般地，我們?cè)谑诸^上（或在設(shè)計(jì)資源站點(diǎn)已經(jīng)找到）有該字體的某種格式文件，最常見的是.TTF?文件，我們需要通過這種文件格式轉(zhuǎn)換為其余兩種文件格式。字體文件格式的轉(zhuǎn)換可以通過網(wǎng)站FontsQuirrel或?onlinefontconverter提供的在線字體轉(zhuǎn)換服務(wù)獲取。這里推薦第一個(gè)站點(diǎn)，它允許我們選擇需要的字符生成字體文件（在服務(wù)的最后一個(gè)選項(xiàng)），這樣就大大縮減了字體文件的大小，使得本方案更具實(shí)用性。

然后
獲取到三種格式的字體文件后，下一步要在樣式表中聲明該字體，并在需要的地方使用該字體。?
字體聲明如下：

@font-face {font-family: 'emotion';src: url('emotion.eot'); /* IE9*/src: url('emotion.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('emotion.woff') format('woff'), /* chrome、firefox */url('emotion.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('emotion.svg#svgFontName') format('svg'); /* iOS 4.1- */}

例如：

@font-face { font-family: 'fontNameRegular'; src: url('華康少女文字.eot'); src: local('華康少女文字 Regular'), local('華康少女文字'), url('華康少女文字.woff') format('woff'), url('華康少女文字.ttf') format('truetype'), url('華康少女文字.svg#華康少女文字') format('svg'); } body{background-color:#D2CDBE;font-family: "華康少女文字","宋體",sans-serif; }

總結(jié)

以上是生活随笔為你收集整理的css网络字体@font-face的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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