.NET MAUI：如何为自定义WebView渲染器设置字体与字号

问题场景 #

在.NET MAUI应用中使用自定义WebView展示HTML内容，需要为其配置字体族与字号。目前已实现的字号调整功能在iPhone上正常生效，但iPad上完全不起作用，同时还需要补充字体族的设置逻辑。以下是当前使用的自定义渲染器代码：

public class MyWebViewRenderer : ViewRenderer<MyWebView, WKWebView>
{
    WKWebView _wkWebView;

    protected override void OnElementChanged(ElementChangedEventArgs<MyWebView> e)
    {
        base.OnElementChanged(e);

        if (Control == null)
        {
            var config = new WKWebViewConfiguration();
            config.AllowsInlineMediaPlayback = true;
            _wkWebView = new WKWebView(Frame, config);
            //transparent background
            _wkWebView = new WKWebView(CGRect.Empty, config);
            _wkWebView.BackgroundColor = UIColor.Clear;
            _wkWebView.ScrollView.BackgroundColor = UIColor.Clear;
            _wkWebView.ScrollView.ScrollEnabled = false;
            _wkWebView.Opaque = false;
            _wkWebView.NavigationDelegate = new MyNavigationDelegate();
            SetNativeControl(_wkWebView);
            
        }
    }

    public class MyNavigationDelegate : WKNavigationDelegate
    {
        public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
        {
            string fontSize = "";
            if (Device.Idiom == TargetIdiom.Phone)
            {
                fontSize = "500%"; // > 100% shows larger than previous
            }
            else if (Device.Idiom == TargetIdiom.Tablet)
            {
                fontSize = "750%"; // > 100% shows larger than previous
            }

            string stringsss = String.Format(@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '{0}'", fontSize);
            WKJavascriptEvaluationResult handler = (NSObject result, NSError err) =>
            {
                if (err != null)
                {
                    System.Console.WriteLine(err);
                }
                if (result != null)
                {
                    System.Console.WriteLine(result);
                }
            };
            webView.EvaluateJavaScript(stringsss, handler);
        }

    }

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);

        if (e.PropertyName == "Url")
        {
            string finalHtml = Element.Url.Replace("width=\"640\"", "width=\"1000\"");
            Control.LoadHtmlString(finalHtml, null);
        }
    }
}

问题分析 #

1. iPad字号失效原因：webkitTextSizeAdjust是WebKit的旧属性，在iPad的WebView中可能因为viewport适配逻辑或属性兼容性问题被忽略，导致字号调整不生效。
2. 缺少字体族设置：当前代码没有任何针对字体族的配置逻辑。
3. WKWebView初始化冗余：代码中重复创建了两次WKWebView实例，会导致前一次的实例被丢弃，可能引发潜在的资源或状态问题。

解决方案 #

核心优化点 #

1. 改用CSS直接设置字体属性：放弃webkitTextSizeAdjust，直接通过CSS设置font-family和font-size，兼容性更强。
2. 注入全局样式头：在加载HTML时注入包含字体族、基础字号和viewport的样式头，确保适配所有设备。
3. 修复WKWebView初始化逻辑：只创建一次WKWebView实例，避免资源浪费。
4. 调整JS样式设置逻辑：使用更可靠的方式设置body的字体样式，确保在iPad上生效。

修改后的完整代码 #

public class MyWebViewRenderer : ViewRenderer<MyWebView, WKWebView>
{
    WKWebView _wkWebView;

    protected override void OnElementChanged(ElementChangedEventArgs<MyWebView> e)
    {
        base.OnElementChanged(e);

        if (Control == null)
        {
            var config = new WKWebViewConfiguration();
            config.AllowsInlineMediaPlayback = true;
            // 只创建一次WKWebView实例，使用正确的布局参数
            _wkWebView = new WKWebView(CGRect.Empty, config);
            _wkWebView.BackgroundColor = UIColor.Clear;
            _wkWebView.ScrollView.BackgroundColor = UIColor.Clear;
            _wkWebView.ScrollView.ScrollEnabled = false;
            _wkWebView.Opaque = false;
            _wkWebView.NavigationDelegate = new MyNavigationDelegate();
            SetNativeControl(_wkWebView);
        }
    }

    public class MyNavigationDelegate : WKNavigationDelegate
    {
        public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
        {
            // 根据设备类型设置目标字号（使用px单位更可靠）
            string fontSize = Device.Idiom == TargetIdiom.Phone ? "24px" : "36px";
            // 设置字体族（替换为你需要的字体，比如系统字体或自定义字体）
            string fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";

            // 执行JS设置body的字体样式
            string jsScript = $@"
                document.body.style.fontFamily = '{fontFamily}';
                document.body.style.fontSize = '{fontSize}';
                // 确保所有子元素继承字体设置
                document.querySelectorAll('*').forEach(el => {{
                    el.style.fontFamily = 'inherit';
                }});
            ";

            webView.EvaluateJavaScript(jsScript, (result, err) =>
            {
                if (err != null)
                {
                    System.Console.WriteLine($"JS执行错误: {err.LocalizedDescription}");
                }
            });
        }
    }

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);

        if (e.PropertyName == "Url")
        {
            // 注入viewport和基础样式头，确保HTML适配移动端
            string htmlHeader = @"
                <head>
                    <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no'>
                    <style>
                        /* 全局基础样式，确保图片适配 */
                        img {{ max-width: 100%; height: auto; }}
                        /* 默认字体继承 */
                        * {{ font-family: inherit; }}
                    </style>
                </head>
            ";

            // 处理原始HTML，替换宽度并添加头部
            string processedHtml = Element.Url.Replace("width=\"640\"", "width=\"100%\"");
            string finalHtml = $"<html>{htmlHeader}<body>{processedHtml}</body></html>";

            Control.LoadHtmlString(finalHtml, null);
        }
    }
}

关键修改说明 #

• 字体族设置：在JS中直接指定fontFamily，可以使用系统字体或自定义字体（如果是自定义字体需确保已在iOS项目中正确导入）。
• 字号单位：改用px单位替代百分比，避免webkitTextSizeAdjust的兼容性问题，同时根据设备类型设置不同的固定字号。
• Viewport注入：添加正确的viewport元标签，确保WebView在iPad上的布局适配正确。
• HTML结构优化：将原始HTML包裹在标准的html/body结构中，确保样式能正确应用。
• WKWebView初始化修复：移除重复创建的代码，只保留一次实例化。

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