एंड्रॉइड में कोटलिन का उपयोग करके WebView का फ़ॉन्ट फेस कैसे बदलें?

एंड्रॉइड WebView में कस्टम फ़ॉन्ट लागू करना

यह उदाहरण दर्शाता है कि WebView में लोड किए गए HTML सामग्री के लिए एसेट्स फ़ोल्डर से कस्टम फ़ॉन्ट का उपयोग कैसे किया जाए।

चरण 1: नया प्रोजेक्ट बनाएं

एंड्रॉइड स्टूडियो में File → New Project चुनें।

चरण 2: लेआउट (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="8dp"
    tools:context=".MainActivity"> 
    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" /> 
</RelativeLayout>

चरण 3: एसेट्स फ़ोल्डर और फ़ॉन्ट फ़ाइल बनाएं

1. प्रोजेक्ट व्यू में app पर राइट-क्लिक करें → New → Folder → Assets Folder
2. assets फ़ोल्डर में अपना फ़ॉन्ट फ़ाइल रखें (उदाहरण: custom_font.ttf या .otf)
3. एसेट्स में एक HTML फ़ाइल बनाएं: webview_content.html

चरण 4: HTML फ़ाइल (assets/webview_content.html)

<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>कस्टम फ़ॉन्ट WebView</title>
    <style type="text/css">
        @font-face {
            font-family: 'CustomFont';
            src: url('file:///android_asset/custom_font.ttf') format('truetype');
        }
        body {
            font-family: 'CustomFont', sans-serif;
            font-size: 18px;
            line-height: 1.6;
            text-align: justify;
            color: #333333;
            padding: 16px;
            background-color: #fafafa;
        }
        h1 { color: #2c3e50; text-align: center; }
        .highlight { color: #e74c3c; font-weight: bold; }
    </style>
</head>
<body>
    <h1>कस्टम फ़ॉन्ट डेमो</h1>
    <p>यह टेक्स्ट एसेट्स फ़ोल्डर से लोड किए गए कस्टम फ़ॉन्ट का उपयोग करता है।</p>
    <p>"हमारे सभी सपने सच हो सकते हैं, अगर हमारे पास उनका पीछा करने का साहस हो।" - वॉल्ट डिज़्नी</p>
    <p>हिंदी टेक्स्ट: यह एक परीक्षण है कस्टम फ़ॉन्ट के साथ।</p>
</body>
</html>

चरण 5: MainActivity.kt

import android.os.Bundle
import android.webkit.WebSettings
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    private lateinit var webView: WebView
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"
        
        webView = findViewById(R.id.webView)
        setupWebView()
        loadContent()
    }
    
    private fun setupWebView() {
        val settings: WebSettings = webView.settings.apply {
            // JavaScript सक्षम करें (CSS @font-face के लिए आवश्यक नहीं, लेकिन अच्छा अभ्यास)
            javaScriptEnabled = true
            
            // ज़ूम सक्षम करें
            builtInZoomControls = true
            displayZoomControls = false
            
            // कैश मोड
            cacheMode = WebSettings.LOAD_DEFAULT
            
            // डोम स्टोरेज
            domStorageEnabled = true
            
            // फ़ॉन्ट आकार समायोजन
            defaultFontSize = 16
            minimumFontSize = 12
        }
        
        // लिंक को WebView में ही खोलें
        webView.webViewClient = WebViewClient()
    }
    
    private fun loadContent() {
        // एसेट्स से HTML लोड करें
        webView.loadUrl("file:///android_asset/webview_content.html")
    }
    
    // बैक बटन हैंडलिंग
    override fun onBackPressed() {
        if (webView.canGoBack()) {
            webView.goBack()
        } else {
            super.onBackPressed()
        }
    }
    
    override fun onDestroy() {
        // मेमोरी लीक रोकें
        webView.destroy()
        super.onDestroy()
    }
}

चरण 6: AndroidManifest.xml (इंटरनेट अनुमति नहीं चाहिए लोकल HTML के लिए)

<?xml version="1.0" encoding="utf-8"?> 
<manifest xmlns:android="https://schemas.android.com/apk/res/android" 
    package="com.example.webviewfont"> 
    <application 
        android:allowBackup="true" 
        android:icon="@mipmap/ic_launcher" 
        android:label="@string/app_name" 
        android:roundIcon="@mipmap/ic_launcher_round" 
        android:supportsRtl="true" 
        android:theme="@style/AppTheme"> 
        <activity android:name=".MainActivity"> 
            <intent-filter> 
                <action android:name="android.intent.action.MAIN" /> 
                <category android:name="android.intent.category.LAUNCHER" /> 
            </intent-filter> 
        </activity> 
    </application> 
</manifest>

उन्नत: डायनामिक फ़ॉन्ट लोडिंग

// रनटाइम पर फ़ॉन्ट बदलें
fun changeWebViewFont(fontAssetName: String) {
    val css = """
        @font-face {
            font-family: 'DynamicFont';
            src: url('file:///android_asset/$fontAssetName') format('truetype');
        }
        body { font-family: 'DynamicFont', sans-serif !important; }
    """.trimIndent()
    
    webView.loadUrl("javascript:(function() { " +
        "var style = document.createElement('style'); " +
        "style.innerHTML = `${css.replace("\n", "\\n").replace("'", "\\'")}`; " +
        "document.head.appendChild(style); " +
        "})()")
}

महत्वपूर्ण नोट्स:

• file:///android_asset/: एंड्रॉइड एसेट्स फ़ाइलों तक पहुंचने के लिए विशेष URI स्कीम
• फ़ॉन्ट फॉर्मेट: TTF, OTF, WOFF समर्थित हैं
• CSS !important: मौजूदा स्टाइल को ओवरराइड करने के लिए उपयोगी
• बड़े फ़ॉन्ट: बड़े फ़ॉन्ट फ़ाइलों के लिए, डाउनलोड करने योग्य फ़ॉन्ट या सिस्टम फ़ॉन्ट का उपयोग करने पर विचार करें
• प्रदर्शन: WebView सेटिंग्स में setRenderPriority(WebSettings.RenderPriority.HIGH) सेट करें