如何跨多个平台（Android、iOS、Windows）在 .NET MAUI 中的 WebView 中加载自定义 TTF 字体？

Question

我正在构建一个 .NET MAUI 应用程序，它使用 WebView 来显示 HTML 内容。我想在 HTML 中使用自定义 TrueType 字体 (

.ttf

)，但在 Android、iOS 和 Windows (UWP) 上正确加载它时遇到问题。

我已将

RedHatTextVariableFont_wght.ttf

字体文件放置在项目的 Resources/Raw/ 文件夹中，并且我尝试使用以下 CSS 将其加载到 WebView 中：

@font-face {
    font-family: 'RedHatTextVariableFont_wght';
    src: url('file:///android_asset/Resources/FireCodeRequirements/RedHatTextVariableFont_wght.ttf') format('truetype'); /* For Android */
         url('file:///Resources/FireCodeRequirements/RedHatTextVariableFont_wght.ttf') format('truetype'); /* For iOS */
         url('ms-appx-web:///Resources/FireCodeRequirements/RedHatTextVariableFont_wght.ttf') format('truetype'); /* For Windows */
}

body {
    font-family: 'RedHatTextVariableFont_wght';
}

该字体未显示在任何平台上的 WebView 中。这是我到目前为止所尝试过的：

将字体放入
```
Resources/Raw/ folder.
```
将构建操作设置为
```
MauiAsset
```
。
在
```
src
```
规则中为每个平台（Android、iOS、Windows）使用不同的
```
@font-face
```
路径。

尽管如此，字体仍无法正确加载。

问题： 在 .NET MAUI 应用程序中的所有平台（Android、iOS 和 Windows）的 WebView 中引用和加载自定义

.ttf

字体的正确方法是什么？

任何帮助将不胜感激！

Answer 1

在 Android 上，参考符号应为

""

而不是

''

。

可以参考我这边下面的代码，在我这边有效。

            <WebView>
                <WebView.Source>
                    <HtmlWebViewSource>
                        <HtmlWebViewSource.Html>
                            <![CDATA[
<html>
<head>
<style type="text/css">
            @font-face {
            font-family: MyFont;
            src: url("file:///android_asset/Samantha.ttf");
                 

            }
 
            body {
            font-family: MyFont;
            font-size: medium;
            text-align: justify;
            }
</style>
</head>
<body>
<p>Hello World</p>
</body>
</html>
                ]]>
                        </HtmlWebViewSource.Html>
                    </HtmlWebViewSource>
                </WebView.Source>
            </WebView>

我们需要注册字体如下：

public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                    //register the font here
                    fonts.AddFont("Samantha.ttf", "MyFont");
                });

#if DEBUG
            builder.Logging.AddDebug();
#endif

            return builder.Build();
        }
    }

如何跨多个平台（Android、iOS、Windows）在 .NET MAUI 中的 WebView 中加载自定义 TTF 字体？

问题描述投票：0回答：1

1个回答

最新问题

如何跨多个平台（Android、iOS、Windows）在 .NET MAUI 中的 WebView 中加载自定义 TTF 字体？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1