WinUI 3多路径图标转TTF字体丢失细节问题求助

用webfonts-generator npm包写脚本把图标转成.ttf字体时，单路径图标显示正常，对应的WinUI 3代码示例：

<DataTemplate x:Key="SampleIconSinglePath">
    <Viewbox
        MinHeight="24"
        MinWidth="24"
        Height="{Binding Height}"
        Width="{Binding Width}" >
        <PathIcon
            Foreground="{ThemeResource SystemBaseHighColor}"
            Data= "svg path code"/>
    </Viewbox>
</DataTemplate>

但多路径图标转换后问题频出：有的丢失精细细节（比如带外圆和中心三角的图标，转完只剩黑圆），有的出现不该有的填充区域，对应的WinUI 3代码示例：

<DataTemplate x:Key="SampleIcon">
    <Viewbox
        MinHeight="24"
        MinWidth="24"
        Height="{Binding Height}"
        Width="{Binding Width}" >
    <Canvas Height="{Binding Height}" Width="{Binding Width}">  
    <Path Fill="{ThemeResource SystemBaseHighColor}" Data="svg path code" />
    <Path Fill="{ThemeResource SystemBaseHighColor}" Data="svg path code" />  
    <Path Fill="{ThemeResource SystemBaseHighColor}" Data="svg path code" />  
    <Path Fill="{ThemeResource SystemBaseHighColor}" Data="svg path code" />  
    <Path Fill="{ThemeResource SystemBaseHighColor}" Data="svg path code" />  
  </Canvas>  
    </Viewbox>
</DataTemplate>

之前试过查看PathGeometry相关属性、修改SVG的fill-rule为"nonzero"，还参考过将SVG的evenodd填充规则转换为nonzero的相关内容，下面是具体解决方法：

一、优化字体转换流程 #

• 合并SVG路径并统一填充规则：多路径转字体时，填充规则冲突或路径方向不一致是核心问题。先用SVG编辑工具（比如Inkscape、Figma）把多路径合并成单个路径，同时统一设置fill-rule（选nonzero或evenodd）；也可以用svg-path-parser这类工具在转换脚本里自动合并路径。
• 调整webfonts-generator配置：如果工具支持，在配置里明确指定fillRule参数，确保转换时遵循正确的填充规则；同时检查工具版本，升级到最新版修复已知的多路径处理bug。
• 预处理路径方向：填充规则依赖路径的绘制方向（顺时针/逆时针），如果出现异常填充，用工具反转错误方向的路径，保证所有路径方向逻辑一致。

二、WinUI 3中直接使用多路径的正确姿势 #

如果不转字体，直接在WinUI 3里渲染多路径图标，要注意这几点：

• 统一设置FillRule：把多个路径整合到一个Path的PathGeometry中，设置统一的FillRule（对应SVG的规则），避免Canvas中多个Path各自填充导致的异常。示例代码：

<DataTemplate x:Key="FixedSampleIcon">
    <Viewbox MinHeight="24" MinWidth="24" Height="{Binding Height}" Width="{Binding Width}">
        <Path Foreground="{ThemeResource SystemBaseHighColor}">
            <Path.Data>
                <PathGeometry FillRule="EvenOdd">
                    <PathFigureCollection>
                        <PathFigure Data="第一个svg路径代码"/>
                        <PathFigure Data="第二个svg路径代码"/>
                        <!-- 依次添加所有路径 -->
                    </PathFigureCollection>
                </PathGeometry>
            </Path.Data>
        </Path>
    </Viewbox>
</DataTemplate>

• 避免Canvas嵌套：Canvas只是布局容器，不会处理路径的填充逻辑，用PathGeometry合并路径才能让填充规则生效，保证图标显示和SVG一致。

内容的提问来源于stack exchange，提问作者Blondie