一条字体进入,所有网络字体都会出现。
该工具的目的是自动化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。
请负责任地转换!尊重字体创建者的版权。