无法为 WASM 配置 FontAwesome

Question

我已按照网络上的参考资料进行操作 https://platform.uno/docs/articles/features/custom-fonts.html and also https://platform.uno/docs/articles/features/custom-fonts.html，但无法正常工作。

我使用 powershell 创建了 base64，然后将其添加到我的 Fonts.css 的 ... 位置。

@font-face {
    font-family: "FontAwesomeRegular";
    src: url(data:application/x-font-otf;charset=utf-8;base64,...) format('otf');
    font-weight: normal;
    font-style: normal;
}

然后我在 ResourceDictionary

的 app.xaml 中添加了以下内容

<FontFamily x:Key="FontAwesomeRegularWasm">ms-apps:///Assets/FontAwesomeRegular#Font Awesome 5 Free</FontFamily>

其中 FontAwesomeRegular 是上面@font-face 中给出的字体系列名称，Font Awesome 5 Free 是 FontAwesome 字体系列名称。

我的测试 Xaml 看起来像：

<ToggleButton>
    <ToggleButton.Content>
        <FontIcon FontFamily="{StaticResource FontAwesomeRegularWasm}" Glyph="&#xf7a5;" />
    </ToggleButton.Content>
</ToggleButton>

我错过了什么？

Answer 1

这是一个用法示例：

<Page ...>
    
    <Page.Resources>
        <FontFamily x:Key="FontAwesomeRegularWasm2">ms-appx:///Assets/Fonts/FontAwesomeRegular.ttf#FontAwesomeRegular</FontFamily>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel>
            <ToggleButton>
                <ToggleButton.Content>
                    <FontIcon FontFamily="{StaticResource FontAwesomeRegularWasm}" Glyph="&#xf164;" />
                </ToggleButton.Content>
            </ToggleButton>
        </StackPanel>
    </Grid>
</Page>

在 Fonts.css 文件中使用如下定义的字体，如您所见：

@font-face {
    font-family: "FontAwesomeRegular";
    /* fa-regular-400.woff2 */
    src: url(data:application/x-font-woff;charset=utf-8;base64,___CHANGEME___)format('woff');
}

生成 base64 字符串的一种方法是使用一些在线 base64 转换工具，或者使用 WSL/linux 和以下内容：

base64 -w 0 fa-regular-400.woff2 > fa-regular-400.txt

然后用fa-regular-400.txt文件的内容替换css___CHANGEME___。

注意文件定义的重要部分是字体名称后面的部分：

<FontFamily x:Key="FontAwesomeRegularWasm2">ms-appx:///Assets/Fonts/FontAwesomeRegular.ttf#FontAwesomeRegular</FontFamily>

其中 FontAwesomeRegular 必须匹配 css 中定义的 font-family: "FontAwesomeRegular"; 名称。

无法为 WASM 配置 FontAwesome

Unable to configure FontAwesome for WASM

webassembly

uno-platform