Блог

Главная - Вопросы по программированию - Не удалось настроить FontAwesome для WASM

Не удалось настроить FontAwesome для WASM

#webassembly #uno-platform

Вопрос:

Я следил за ссылками в Интернете https://platform.uno/docs/articles/features/custom-fonts.html а также 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;
}

Затем я добавил следующее в 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="amp;#xf7a5;" />
    </ToggleButton.Content>
</ToggleButton>

Что я пропустил?

Ответ №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="amp;#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

Затем замените css ___CHANGEME___ содержимым fa-regular-400.txt файла.

Обратите внимание, что важной частью определения файла является часть после имени шрифта:

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

Где FontAwesomeRegular должно совпадать font-family: "FontAwesomeRegular"; имя, определенное в css.

Метки: