MAUI界面内容间空白与WebView自定义字体显示异常问题

问题1：图片与WebView之间出现空白区域 #

从这几个方向排查解决：

• 检查布局容器的间距与内边距：如果使用VerticalStackLayout这类容器，默认可能带有间距，直接将Spacing和Padding设为0：

  <VerticalStackLayout Spacing="0" Padding="0">
      <Image Source="your_image.png" />
      <WebView ... />
  </VerticalStackLayout>
  

• 清理Image控件的额外边距：给Image添加Margin="0"，同时确认图片本身底部没有空白像素，必要时设置Aspect="Fill"强制填充容器：

  <Image Source="your_image.png" Margin="0" Aspect="Fill" />
  

• 重置WebView加载的HTML样式：WebView内的HTML默认body会自带margin和padding，在HTML头部添加样式重置：

  <head>
      <style>body { margin: 0; padding: 0; }</style>
  </head>
  

问题2：WebView中Poppins-Regular自定义字体显示效果差 #

按以下步骤修复：

1. 确认字体在项目中正确配置：
   将Poppins-Regular.ttf放入项目的Resources/Fonts目录，设置文件的Build Action为EmbeddedResource，然后在MauiProgram.cs中注册字体：

   builder.ConfigureFonts(fonts =>
   {
       fonts.AddFont("Poppins-Regular.ttf", "PoppinsRegular");
   });
   

2. 给WebView嵌入字体资源：
   MAUI注册的字体无法直接被WebView调用，需要将字体转为Base64格式嵌入到HTML中，确保WebView能正确加载：

   // 读取字体文件并转为Base64
   var fontStream = await FileSystem.OpenAppPackageFileAsync("Poppins-Regular.ttf");
   var bytes = new byte[fontStream.Length];
   await fontStream.ReadAsync(bytes, 0, (int)fontStream.Length);
   var base64Font = Convert.ToBase64String(bytes);
   
   // 构造带字体样式的HTML内容
   var htmlContent = $@"
   <html>
       <head>
           <style>
               @font-face {{
                   font-family: 'Poppins-Regular';
                   src: url(data:font/truetype;base64,{base64Font}) format('truetype');
               }}
               body {{
                   font-family: 'Poppins-Regular', sans-serif;
                   -webkit-font-smoothing: antialiased;
                   -moz-osx-font-smoothing: grayscale;
                   text-rendering: optimizeLegibility;
               }}
           </style>
       </head>
       <body>
           <!-- WebView要加载的内容 -->
       </body>
   </html>";
   webView.Source = new HtmlWebViewSource { Html = htmlContent };
   

3. 添加字体渲染优化：
   通过-webkit-font-smoothing等CSS属性提升字体显示的平滑度，避免模糊或锯齿问题。

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