轻松优化(子集)字体仅适用于文本或HTML所需的特定字形!
您是否担心网站的初始下载尺寸?需要下载的兆字节,并且您已经优化和缩小了CSS,JavaScript和图像,但是发现了一些大字体?想法是给您的!该工具分析您的HTML文件和CSS(或任何文本),并创建字体子集,仅包含实际使用的字符或字形的字体文件。
实际上,您可以将字体下载尺寸缩小到原始字体的10%或更少。

Fontimize使用TTF2Web,非常感谢并感谢该奇妙图书馆的作者。
该图书馆最初是为我的个人网站创建的。它使用了四个TTF字体,总计超过1.5MB。 (这并不罕见:一个用于标题,一个用于带有斜体变体的普通文本,以及印刷怪癖的第四个,dropcaps。)
直接运行后,所有字体的总尺寸组合为76KB。
1.5MB降至76KB可节省95.2%!这对下载网站上的页面的初始时间产生了明显的影响,再加上对渲染的巨大影响:在此之前,该站点的初始负载将使用通用的Serif字体呈现,然后在下载字体后几秒钟重新渲染,一旦下载了几秒钟,这看起来真的很糟糕。现在,您将立即或在注意到之前立即获取新字体,并且该站点从一开始就看起来正确。
Fontimize是一个Python库,可以包含在您的Python软件中,也可以在命令行上使用的独立。
首先安装和导入通知:
$ python3 -m pip install fontimize
在您的脚本中:
import fontimize要在磁盘上解析一组HTML文件以及它们使用的CSS文件,并导出新字体(默认情况下,与原始字体相同的文件夹中)仅包含HTML中使用的字形:
all_html_files = [ 'input/one.html' , 'input/two.html' ]
font_results = fontimize . optimise_fonts_for_files ( all_html_files )
print ( font_results [ "css" ])
# Prints CSS files found used by any of the HTML input files:
# { 'input/main.css',
# 'input/secondary.css' }
print ( font_results [ "fonts" ])
# Prints pairs mapping the old fonts to the new optimised font generated for each. Use this to, eg, rewrite your CSS
# By default exports to the same folder as the input files; use `font_output_dir` to change
# { 'input/fonts/Arial.ttf': 'input/fonts/Arial.FontimizeSubset.woff2',
# 'input/fonts/EB Garamond.ttf': 'input/fonts/EB Garamond.FontimizeSubset.woff2' }
print ( font_results [ "chars" ]
# Prints the set of characters that were found or synthesised that the output fonts will use
# { ',', 'u', '.', '@', 'n', 'a', '_', 'l', 'i', 'h', 'Q', 'y', 'w', 'T', 'q', 'j', ' ', 'p', 'm', 's', 'o', 't', 'c' ... }
print ( font_results [ "uranges" ]
# Prints the same set of characters, formatted as ranges of Unicode characters
# U+0020, U+002C, U+002E, U+0040, U+0051, U+0054, U+005F, U+0061-007A ...optimise_fonts_for_files()这可能是您要使用的方法。
根据磁盘上的一组输入文件,优化 /子集字体,(自动)任何HTML文件引用的外部CSS文件。如果文件具有.htm或.html文件扩展名(提取用户可见文本并解释CSS),则将文件解析为HTML,否则将文件视为文本。返回发现的CSS文件的列表和旧的到新优化字体文件的地图。
参数:
html_files : list[str] :路径列表,每个路径是一个HTML文件。每个都将进行分析。font_output_dir = "" :应放置子集字体的路径。默认情况下,这是空的( "" ),这意味着在与输入字体同一位置生成新字体。由于新字体具有不同的名称(请参见subsetname ,下一个参数),您不会覆盖输入字体。没有检查子集字体在编写之前是否已经存在。subsetname = "FontimizeSubset" :优化字体以format OriginalName.FontimizeSubset.woff2重命名。重要的是要将子集字体与所有字形的原始字体区分原始字体。您可以将输出子集名称更改为在文件系统上有效的任何其他字符串。verbose : bool = False :如果是True ,请发出有关其发现并正在生成的CSS文件,字体等的诊断信息。print_stats : bool = True :打印输入字体磁盘上的总尺寸的信息,优化字体的总尺寸,以及节省百分比的信息。如果您希望它静静地运行,则将其设置为False 。fonts : list[str] = [] :字体文件的路径列表。这些被添加到该方法通过CSS找到的任何字体中。如果您传递文本文件而不是HTML,通常会指定这一点addtl_text : str = "" :应添加到文件中的其他字符返回:
dict[str, typing.Any]return_value["css"] - > HTML文件使用的唯一CSS文件列表return_value["fonts"] - >一个dict keys()是原始字体文件,每个密钥的值是生成的替换字体文件。您可以使用它将引用更新到原始字体文件。请注意,Fontimizer不会重写输入CSS。return_value["chars"] - >解析输入时发现的一set字符return_value["uranges] - > unicode范围相同的字符范围:“ u+1000-2000,u+2500-2501”等。请注意,请注意每对中的第二个数字没有“ u+” - 这与字体库的所需输入格式相匹配。optimise_fonts_for_html_contents()类似于optimise_fonts_for_html_files ,除了输入为html作为字符串(例如<head>...</head><body>...<body> )。它不能解析找到使用的CSS文件(以及使用的字体),因此您还需要给它一个字体文件列表以优化。
参数:
html_contents : list[str] :HTML字符串列表。该文本将被提取并用于生成优化字体的字形列表。fonts : list[str] :本地文件系统上的路径列表以优化字体。这些可以是相对路径。其他参数( fontpath , subsetname , verbose , print_stats )与optimise_fonts_for_html_files相同。
返回:
dict keys()是原始字体文件,每个密钥的值是生成的替换字体文件optimise_fonts_for_multiple_text()类似于optimise_fonts_for_html_contents ,除了输入是Python字符串列表。这些字符串的内容用于生成优化字体的字形:输入字符串中的每个唯一字符都会有一个字形(如果输入字体包含所需的字形。)
将字体文件( fonts参数)列表传递为输入字体文件,以根据文本进行优化。
参数:
texts : list[str] :Python字符串列表。生成的字体将包含这些字符串使用的字形。其他参数( fonts , fontpath , subsetname , verbose , print_stats )和返回值对optimise_fonts_for_html_contents为单元。
optimise_fonts()这是主要方法;上面的所有方法最终都在这里。它需要一个python Unicode文本字符串,并列出了字体文件的路径列表以优化,并创建仅包含输入文本所需的唯一字形的字体子集。
参数:
text: str :python unicode字符串。从此生成了一组唯一的Unicode字符,输出字体文件将包含正确渲染此字符串所需的所有字形(假设字体包含要开始的字形。)其他参数( fonts , fontpath , subsetname , verbose , print_stats )和返回值与optimise_fonts_for_html_contents和optimise_fonts_for_multiple_text相同。
命令行工具可以独立使用或集成到内容生成管道中。
简单用法:
python3 fontimize.py file_a.html file_b.html
这解析了HTML以及任何引用的外部CSS文件,以找到同时的字体和二手字体。它与输入字体文件同一位置生成新的字体文件。
python3 fontimize.py --text "The fonts will contain only the glyphs in this string" --fonts "Arial.tff" "Times New Roman.ttf"
这仅生成指定字符串所需的字形,并在与输入字体文件相同的位置以Woff2格式创建新版本的Arial和Times New Roman。
--text "string here" ( -t ):用于渲染此字符串的字形将添加到输入文件中的字形(如果有的话)中。您必须传递输入文件或文本(或两者),否则会出现错误。--fonts "a.ttf" "b.ttf" ( -f ):输入字体的可选列表。这些将添加到通过HTML/CSS引用的任何发现。 --outputdir folder_here ( -o ):放置生成的字体文件的目录。这一定已经存在。--subsetname MySubset ( -s ):生成的字体文件名中使用的短语。将输出字体与输入字体区分开很重要,因为(按定义作为子集)它们不完整。 --verbose ( -v ):在处理时输出详细信息--nostats ( -n ):未打印有关优化结果的信息单位测试通过tests.py进行运行,并在tests中使用文件。请注意,这将在testsoutput文件夹中生成新的输出文件。
tests文件夹包含在SIL Open Font许可证下获得许可的几个字体。
我将Fontimize用作自定义静态站点生成器的一部分来构建我的网站。它是最后一步,根据存储在磁盘上的生成的HTML文件优化字体。然后,来自Fontimize的返回值(例如它创建的字体和分析的CSS文件)是用来重写CSS并指向新优化的字体的。
(重写CSS当前不是通过Fontimize提供的功能;如果您愿意的话,请创建问题或拉动请求。当前,该库会生成新的字体文件并返回映射(作为字典或文本输出),以显示旧字体文件和相应的新文件,但是,如果您不需要修改该文件,则该文件不适合您,如果您愿意为您进行修改,请使用该文件,如果您愿意为您进行修改。需要显式这样做。
默认情况下,新的子集字体将以“ fontimizersubset”的后缀命名,例如, Arial.FontimizerSubset.woff2 。您可以使用subsetname方法参数或--subsetname=Foo命令行参数自定义子集字体的名称。建议使用子集名称避免将优化字体与原始字体混淆(包含所有字形),但您可以使用任何喜欢的名称。默认的名称“ fontimizersubset”只是一个建议,将其他人指向此库,如果他们遇到它。没有必要保留此名称,您可以自由使用其他短语。
CSS伪元素:
对于明确使用的字体和屏幕上显示的任何字形的字体,就会对两个字体进行parses css。这包括CSS伪元素中的字形,例如:before和:after 。如果在这些伪元素中定义了文本或字符,则将它们包含在子集字体中。
内联CSS:
Fontimize当前未在HTML文件中解析内联CSS。它假设正在使用外部CSS,它通过HTML文档的<head>部分中的<link>标签找到。然后,Fontimize将对字体和字形分析这些CSS文件。如果对内联CSS进行解析会有所帮助,请提出一个问题。
其他字符:
当输入文本中找到单个或双引号时,子集字体还将包括相应的左和右倾角引号。同样,如果找到破折号,该子集将包括持续仪表和EM划线。
如果您使用fontimizer,链接到https://fontimize.daveon.design/或此github repo是真的很不错(但不是必需的)。那就是将其他人指向该工具。非常感谢:)