.NET MAUI多平台WebView加载自定义TTF字体的正确方法

针对你的问题，核心是各平台对MauiAsset资源的访问路径存在差异，同时你的CSS路径配置有误。以下是两种可行的解决方案：

方案1：修正平台特定路径（适合保留独立字体文件的场景） #

首先确认你的基础配置正确：

• 字体文件放在Resources/Raw目录，生成操作设为MauiAsset（你已完成此步骤）。
• 字体文件名避免空格、特殊字符，建议简化为易识别的名称。

各平台正确的字体URL #

不同平台对MauiAsset的存储位置不同，需用CSS媒体查询区分加载：

/* Android：Raw资源打包到android_asset根目录 */
@media screen and (-webkit-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
    @font-face {
        font-family: 'RedHatText';
        src: url('file:///android_asset/RedHatTextVariableFont_wght.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
}

/* iOS：用local协议直接访问应用包内资源 */
@supports (-webkit-touch-callout: none) {
    @font-face {
        font-family: 'RedHatText';
        src: url('local:///RedHatTextVariableFont_wght.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
}

/* Windows：Raw资源复制到Assets目录 */
@media screen and (min-width: 0\0) {
    @font-face {
        font-family: 'RedHatText';
        src: url('ms-appx-web:///Assets/RedHatTextVariableFont_wght.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
}

body {
    font-family: 'RedHatText', sans-serif;
}

方案2：嵌入Base64字体（跨平台通用，推荐） #

无需处理平台路径差异，直接将字体编码为Base64嵌入CSS：

1. 转换字体为Base64：
   • 用在线工具或本地命令行（如base64 -i RedHatTextVariableFont_wght.ttf > font.base64）生成字体的Base64字符串。
2. 嵌入到CSS：

@font-face {
    font-family: 'RedHatText';
    src: url(data:font/truetype;base64,这里替换为你的字体Base64字符串) format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'RedHatText', sans-serif;
}

此方法在所有平台的WebView中都能稳定加载，因为字体直接包含在CSS内，无需外部资源请求。

额外排查要点 #

• 验证字体文件本身无损坏：在本地浏览器中直接打开字体文件，确认能正常预览。
• 若加载本地HTML文件，需确保HTML文件的生成操作也设为MauiAsset，并通过HtmlWebViewSource的BaseUrl属性适配平台（可借助MAUI的条件编译设置）。

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