WOFF Web打開字體格式

在網頁上使用自定義字體

文本內容一直是重要的網站,但是在網絡的早期,設計師和開發人員在他們對網頁的印刷控制方面受到嚴重限制。 這包括他們能夠在其網站上可靠使用的字體限制。 您可能聽說過過去提到的術語“網絡安全字體”。 這是指很可能包含在個人計算機中的一小部分字體,這意味著如果您的網站使用了其中一種字體,則可以安全地在個人瀏覽器上正確顯示這些字體。

今天,網絡專業人士有許多新的字體和類型選項可供使用,其中之一就是WOFF格式。

什麼是WOFF?

WOFF是代表“Web Open Font Format”的首字母縮寫詞。它用於壓縮與CSS @ font-face屬性一起使用的字體。 這是一種在網頁中嵌入字體的方法,以便您可以使用超出典型“Arial,Times New Roman,Georgia”的專用字體 - 這些是上述Web安全字體中的一部分。

WOFF作為打包網頁字體的標準提交給W3C。 它在2010年11月16日成為工作草案。今天我們實際上已經有了WOFF 2.0,它將第一版格式的壓縮率提高了近30%。 在某些情況下,這些節省可能更加實質!

為什麼要使用WOFF?

Web字體(包括通過WOFF格式提供的字體)與其他字體選擇相比具有很多優勢。 就像那些網絡安全字體一樣有用,並且在我們的工作中這些字體當然還有一個地方,我們也很高興能夠擴大我們的選擇並打開我們的印刷選項。

WOFF字體具有以下優點:

WOFF瀏覽器支持

WOFF在現代瀏覽器中提供了出色的瀏覽器支持,其中包括:

如今,它基本上得到了全面的支持,唯一的例外是Opera Mini的所有版本。

如何使用WOFF字體

為了使用WOFF文件,需要將WOFF文件上傳到Web服務器,使用@ font-face屬性為其命名,然後在CSS中調用字體。 例如:

  1. 將稱為myWoffFont.woff的字體上傳到Web服務器的/ fonts目錄。
  2. 在你的CSS文件中添加@ font-face部分:
    @ font-face {
    font-family:myWoffFont;
    src:url('/ fonts / myWoffFont.woff')格式('woff');
    }
  1. 將新字體名稱(myWoffFont)添加到您的CSS字體堆棧中,就像您使用任何其他字體名稱一樣:
    p {
    font-family: myWoffFont ,Geneva,Arial,Helvetica,sans-serif;
    }

在哪裡得到WOFF字體

有兩個偉大的地方,你可以找到許多免費用於商業和非商業用途的WOFF字體:

如果您有使用WOFF格式的字體的許可證,您可以使用WOFF創建者(如Font Squirrel)將您的字體文件轉換為WOFF文件。 還有一個名為sfnt2woff的命令行工具,您可以在Macintosh和Windows上使用它將TrueType / OpenType字體轉換為WOFF。

下載適合您的系統的二進製文件並在命令行(或終端)上運行它並按照說明進行操作。

WOFF示例

以下是WOFF文件的幾個示例:24小時HTML5中的WOFF頁面。

Jennifer Krynin的原創文章。 由Jeremy Girard於7/11/17編輯