一條字體進入,所有網絡字體都會出現。
該工具的目的是自動化Web友好的字體格式和@font-face CSS規則從任意字體文件中自動化,而無需依靠Web服務或其他需要網絡連接。如果需要,該工具可以生成內聯數據URL。
有關最大化嵌入式字體兼容性的更多信息,請參見CSS-Tricks.com上的使用 @font-face文章。
./setup # Fetch and build third-party libraries
./bin/generate-webfonts MyFont.ttf -o assets/ # Convert a font 驅動程序腳本是generate-webfonts 。從最基本的角度來看,它接受字體文件作為參數,並將所有轉換後的字體吐給目錄。它還可以為適當的@font-face規則生成CSS。
./bin/generate-webfonts -o assets MyFont.ttf --css MyFont.css
上面使用默認輸出格式的命令生成以下文件:
MyFont.cssassets/MyFont.woffassets/MyFont.woff2assets/MyFont.ttfassets/MyFont.eotassets/MyFont.svg文件MyFont.css將包含以下內容:
@font-face {
font-family : 'MyFont' ;
src : url ( 'assets/MyFont.eot' );
src : url ( 'assets/MyFont.eot?#iefix' ) format ( 'embedded-opentype' ) ,
url ( 'assets/MyFont.woff2' ) format ( 'woff2' ) ,
url ( 'assets/MyFont.woff' ) format ( 'woff' ) ,
url ( 'assets/MyFont.ttf' ) format ( 'truetype' ) ,
url ( 'assets/MyFont.svg#MyFont' ) format ( 'svg' );
}從概念上講,給定輸入文件列表和輸出格式列表,轉換器將嘗試通過複製匹配輸入文件和轉換文件以填補空白來滿足所有輸出格式的要求。由於基礎字體轉換器的局限性,可能會生成一些未要求的中間格式。
如果已將該格式匹配的文件匹配為輸入之一,則命令將避免以某個輸出格式生成文件。在這種情況下,輸入文件將僅複製到目標目錄(如果已經在輸出目錄中)。如果在參數中未列出此類文件,即使它已經存在於輸出目錄中,它也會被新轉換的文件覆蓋。
有關更高級的用法,請參見下面的選項。
腳本bin/generate-webfonts接受字體文件列表作為輸入和許多選項:
-o --output轉換文件的目標目錄。即使僅生成內聯字體,仍需要目標目錄來容納中間文件。
-f --format逗號分隔的輸出格式列表。可能的格式是:
任何具有以下後綴的格式:inline將導致字體在CSS文件中以base64編碼的數據URL的形式將其列為CSS文件中,而不是文件的URL。
默認格式列表為eot,woff2,woff,ttf,svg 。
-c --css生成的CSS文件的路徑。使用-用於Stdout。如果省略,則不會生成CSS。
-p --prefix生成的CSS中使用的字體路徑前綴。例如,如果您的樣式表是從css/提供的,並且您的字體是從fonts/提供的,則您將需要將前綴設置為../fonts/ 。默認前綴是輸出目錄的名稱。
--font-familyCSS文件中使用的字體系列的名稱。默認值是第一個輸入文件的基本名稱。
--verbose運行時顯示冗長的輸出。
-v --version顯示版本。
generate-webfonts支持以下字體格式:
它可以轉換為上面列出的任何格式,但一個例外:它不能將EOT轉換為其他格式。
發電機利用三個第三方庫/工具來轉換字體。由於沒有單個工具支持所有字體格式,因此生成器的作業是找出一個良好的轉換器鏈,用於在任何兩種字體格式之間進行轉換。在引擎蓋下,它實際上是在依賴圖圖上作為最短的路徑問題實現的。
使用的第三方工具是:
Fontforge支持閱讀和生成大量字體格式,儘管它不支持EOT或WOFF2格式。巨大的快速庫可以將TTF字體轉換為EOT或WOFF,涵蓋了這些差距之一。 Google的WOFF2轉換器還用於在WOFF2和TTF格式之間轉換。
如上所述,運行./setup下載並構建第三方庫。運行./setup將在本地查看SFNTLY和WOFF2轉換器存儲庫, generate-webfonts可以找到它們。使用軟件包管理器或直接從其網站安裝Fontforge。
設置過程假定 *NIX環境。當前不支持在Windows上設置此工具。
運行設置腳本需要以下命令:
gitjava和javacmvn (Maven) generate-webfonts腳本本身需要Python 3。
請負責任地轉換!尊重字體創建者的版權。