Android WebView 使用本地字体-WebViewAssetLoader

看看项目是否有WebViewAssetLoader类，如果找不到，需要导包。

复制代码

implementation 'androidx.webkit:webkit:1.15.0'

WebViewAssetLoader使用

复制代码

val assetLoader = WebViewAssetLoader.Builder()
    .addPathHandler("/assets/", WebViewAssetLoader.AssetsPathHandler(mContext))
    .addPathHandler("/res/", WebViewAssetLoader.ResourcesPathHandler(mContext))
    .build()

2行addPathHandler看需要添加，字体在res目录，就要用ResourcesPathHandler；字体在assets目录，就要用AssetsPathHandler。

Web网页的 CSS 中使用 appassets.androidplatform.net 协议来引用本地字体

复制代码

@font-face {
    font-family: 'Inter-SemiBold';
    src: url('https://appassets.androidplatform.net/assets/fonts/Inter-SemiBold.otf') format('opentype');
}

协议 https://appassets.androidplatform.net/

当你使用 WebViewAssetLoader 处理本地资源时，协议（URL）会自动映射为 https://appassets.androidplatform.net/，这是 Android 在 WebView 中为本地资源提供的一个特殊 URL。

因此，你不需要修改域名部分，保持为 https://appassets.androidplatform.net/，而本地资源的路径会根据你在 WebViewAssetLoader 中设置的路径来进行映射。

如何配置资源路径

复制代码

https://appassets.androidplatform.net/assets/fonts/Inter-SemiBold.otf

当请求以 /assets/ 开头的路径时，它应该从 assets 文件夹中加载文件。需要注意的是，AssetsPathHandler 用来处理 assets/ 文件夹下的资源。

上面路径处理assets目录下的fonts/Inter-SemiBold.otf的字体。

复制代码

https://appassets.androidplatform.net/res/fonts/Inter-SemiBold.otf

当请求以 /res/ 开头的路径时，它应该从 resources 文件夹中加载文件。需要注意的是，ResourcesPathHandler 用来处理 res/ 文件夹下的资源。

同理，该路径处理res目录下的fonts/Inter-SemiBold.otf的字体。

设置 WebViewClient

复制代码

webView.webViewClient = object : WebViewClient() {
    // 项目中字体放在res/font/XXX.otf路径，所以用ResourcesPathHandler
    val assetLoader = WebViewAssetLoader.Builder()
        .addPathHandler("/res/", WebViewAssetLoader.ResourcesPathHandler(mContext))
        .build()

    override fun shouldInterceptRequest(view: WebView?, request: WebResourceRequest): WebResourceResponse? {
        return interceptFontRequest(request.url) ?: super.shouldInterceptRequest(view, request)
    }

    // web使用本地字体
    private fun interceptFontRequest(uri: Uri): WebResourceResponse? {
        val url = uri.toString()
        if (url.endsWith(".ttf") || url.endsWith(".otf")) {
            try {
                val response = assetLoader.shouldInterceptRequest(uri)
                // 必加，不加可能不生效。
                response?.responseHeaders = mapOf("Access-Control-Allow-Origin" to "*")
                return response
            } catch (e: Exception) {
                LogUtils.e(e)
            }
        }
        return null
    }
}

web网页的css使用：

复制代码

https://appassets.androidplatform.net/res/font/xxx.otf