?html5之前，只要稍微特殊點的字體，都必須做成圖片，以免客戶端無法顯示。而對于正文或者需要后臺調(diào)用大量文字的地方，則無能為力。但是，html5推出了 @font-face 支持自定義字體之后，這個問題就完美解決了。
??????? 現(xiàn)在的問題是，不同瀏覽器對于字體格式的支持不同，而我們從網(wǎng)上下載的自己滿意的字體，往往都是tff等常見格式，如何轉(zhuǎn)換成 @font-face 需要的 eot、svg等格式，才是當下急需的。
??????? 我愛模板網(wǎng)推薦個給位一個很好很強大的字體格式轉(zhuǎn)換網(wǎng)站：Font Squirrel，網(wǎng)址：https://www.fontsquirrel.com/tools/webfont-generator （這個地址打開，直接可以轉(zhuǎn)換字體）。
??????? 轉(zhuǎn)換字體的步驟：

??????? 點擊“upload fonts”按鈕上傳文件--->選擇要轉(zhuǎn)換的類型--->點擊“?Yes, the fonts I'm uploading are legally eligible for web embedding.”，出現(xiàn)下載按鈕--->點擊“download your kit”，即可將轉(zhuǎn)換后得到的字體下載下來。如下圖：

?

??????? 當然，第三個選項，是更詳細的設(shè)置，如下：
?

?

??????? 下載完成，解壓下載的壓縮包，得到如下的文件：
?

??????? 最后，將這些字體上傳到您的服務(wù)器，再使用@font-face定義下這些字體：

@font-face {font-family: 'Open Sans';src: url('font/opensans-webfont.eot');src: url('font/opensans-webfont.eot?#iefix') format('embedded-opentype'),url('font/opensans-webfont.woff2') format('woff2'),url('font/opensans-webfont.woff') format('woff'),url('font/opensans-webfont.ttf') format('truetype'),url('font/opensans-webfont.svg#open_sansregular') format('svg');font-weight: normal;font-style: normal; }

? ? ? ? 這樣，您直接使用您定義的字體名稱即可，這里是：“Open Sans”。

總結(jié)

以上是生活随笔為你收集整理的字体转换网站——Font Squirrel（推荐阅读）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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