एंड्रॉइड में वेबव्यू का फ़ॉन्ट चेहरा कैसे बदलें?


97

मैं वेबव्यू के डिफ़ॉल्ट फ़ॉन्ट को कस्टम फ़ॉन्ट में बदलना चाहता हूं। मैं Android के लिए एक द्विभाषी ब्राउज़र ऐप विकसित करने में वेबव्यू का उपयोग कर रहा हूं।

मैंने अपने कस्टम फॉन्ट को संपत्ति में रखकर कस्टम टाइपफेस का एक उदाहरण प्राप्त करने की कोशिश की। लेकिन फिर भी वेबव्यू के डिफ़ॉल्ट फ़ॉन्ट को मेरे फ़ॉन्ट पर सेट नहीं किया जा सका।

यही मैंने कोशिश की:

Typeface font = Typeface.createFromAsset(getAssets(), "myfont.ttf"); 
private WebView webview;
WebSettings webSettings = webView.getSettings();
webSettings.setFixedFontFamily(font);

क्या कोई इसे सही कर सकता है या किसी अन्य विधि को वेबव्यू के डिफ़ॉल्ट फ़ॉन्ट को कस्टम फ़ॉन्ट में बदलने का सुझाव दे सकता है?

धन्यवाद!


अंत में मुझे एहसास हुआ कि यह नहीं किया जा सकता है।
धनिका 19

इसकी जांच करें। stackoverflow.com/questions/1344080/…
सैमुअल

hi क्या आपको इस फॉन्ट फेस चीज़ के लिए कोई समाधान मिला, मैं हिंदी फॉन्ट स्टैकओवरफ़्लो . com/ q/ 5868198/ 501859 के लिए कोशिश कर रहा हूँ । मेरी मदद करो अगर यू समाधान मिल गया
किशोर 12

@ धनिका इसी मुद्दे का सामना करते हुए कैसे हल करें।
नागार्जुनरेड्डी

वेबव्यू टेक्स्ट में सेट कस्टम फॉन्ट के लिए कृपया इस लिंक को देखें .. stackoverflow.com/a/25692052/3921740 [1] [1]: stackoverflow.com/a/25692052/3921740
user3921752

जवाबों:


112

इस परियोजना में इसका एक कार्यशील उदाहरण है । यह करने के लिए नीचे फोड़े:

  1. अपने assets/fontsफ़ोल्डर में, वांछित OTF या TTF फ़ॉन्ट (यहाँ MyFont.otf) रखें
  2. एक HTML फ़ाइल बनाएँ, जिसका उपयोग आप WebView की सामग्री, assetsफ़ोल्डर के अंदर (यहाँ अंदर assets/demo/my_page.html) करेंगे:

    <html>
    <head>
    <style type="text/css">
    @font-face {
        font-family: MyFont;
        src: url("file:///android_asset/fonts/MyFont.otf")
    }
    body {
        font-family: MyFont;
        font-size: medium;
        text-align: justify;
    }
    </style>
    </head>
    <body>
    Your text can go here! Your text can go here! Your text can go here!
    </body>
    </html>
  3. HTML को कोड से WebView में लोड करें:

    webview.loadUrl("file:///android_asset/demo/my_page.html");

ध्यान दें कि एचटीएमएल के माध्यम से इंजेक्शन लगाने की loadData()अनुमति नहीं है। प्रलेखन के अनुसार :

ध्यान दें कि जावास्क्रिप्ट की समान मूल नीति का अर्थ है कि इस पद्धति का उपयोग करके लोड किए गए पृष्ठ पर चलने वाली स्क्रिप्ट 'http' (s) सहित 'डेटा' के अलावा किसी भी योजना का उपयोग करके लोड की गई सामग्री तक पहुंचने में असमर्थ होगी। इस प्रतिबंध से बचने के लिए, उचित आधार URL के साथ loadDataWithBaseURL () का उपयोग करें।

जैसा कि @JaLL नीचे टिप्पणी में सुझाव देता है, HTML को स्ट्रिंग से लोड करने के लिए, आपको इसके बजाय अपनी संपत्ति की ओर इशारा करते हुए आधार URL प्रदान करना चाहिए:

webView.loadDataWithBaseURL("file:///android_asset/", htmlData);

जब फ़ॉन्ट को संदर्भित किया जाता है htmlData, तो आप बस /fonts/MyFont.otf(आधार URL को छोड़ कर) का उपयोग कर सकते हैं ।


10
LoadData () काम नहीं करता है, लेकिन webView.loadDataWithBaseURL ("फ़ाइल: /// android_asset /", ... ठीक काम करता है। फिर "/fonts/MyFont.otf" के रूप में फ़ॉन्ट फ़ाइल संदर्भ भी काम करना चाहिए।
JaakL

मेरे मामले में, डेटा ck Editor (backend api) <div style = \ "text-align: center; \"> <span style = \ "background-color: पारदर्शी; \"> से टैग के रूप में लौट रहा है। फ़ॉन्ट रंग = \ "# f20505 \" आकार = \ "5 \" चेहरा = \ "कॉमिक संस MS \"> कृपया हमारे साथ अपनी प्रतिक्रिया साझा करें </ font> <\ / span> मैं इसे webview.loaderata के रूप में सेट कर रहा हूं। () लेकिन इसके फोंट नहीं ले रहा है, कोई समाधान?
बिश्रुति

कॉमिक सैंस एमएस एंड्रॉइड द्वारा प्रदान किया गया फ़ॉन्ट नहीं है। यह केवल तभी काम करेगा जब आपने सीएसएस में फ़ॉन्ट चेहरे को परिभाषित किया है और अपने आवेदन की संपत्ति में फ़ॉन्ट फ़ाइल प्रदान की है।
पॉल लैमरमत्समा

2
मेरा फ़ॉन्ट res/fontफ़ोल्डर में स्थित है । फिर रास्ता क्या होगा? मैंने कोशिश की file:///android_res/font/लेकिन यह काम नहीं कर रहा है।
वायरिंग

105

मैं इस कोड का उपयोग कर रहा हूं :

wv = (WebView) findViewById(R.id.webView1);
String pish = "<html><head><style type=\"text/css\">@font-face {font-family: MyFont;src: url(\"file:///android_asset/font/BMitra.ttf\")}body {font-family: MyFont;font-size: medium;text-align: justify;}</style></head><body>";
String pas = "</body></html>";
String myHtmlString = pish + YourTxext + pas;
wv.loadDataWithBaseURL(null,myHtmlString, "text/html", "UTF-8", null);

2
हे भगवान! यह वही है जो हमें गलत होने के निशान पर डाल देता है: जैसा कि यह पता चला है, एंड्रॉइड 4.2 फ़ॉन्ट को प्रस्तुत नहीं करता है यदि आप "src: url ('... के पीछे" प्रारूप (' ttf ') जोड़ते हैं ... ') "खंड। कि बाहर छोड़ दो और फोंट खूबसूरती से गाया जाता है। Google के अपने वेब फोंट के साथ परीक्षण किया गया।
पास्कल लिंडेलुफ

2
यह रॉकिंग सॉल्यूशन है, थम्स अप
साड बिलाल

loadDataWithBaseURL एंड्रॉइड 4.1 और 4.2 संस्करणों पर काम नहीं कर रहा है :(
मीशा अकोपोव

Android 5.1 में मेरे लिए काम नहीं किया। मैंने (डान सिरस्टैड) उत्तर दिया। अंतर उद्धरण हैfont-family: 'myface';
Mneckoee

52

और भी सरल, आप फ़ॉन्ट को संदर्भित करने के लिए एसेट URL प्रारूप का उपयोग कर सकते हैं। कोई प्रोग्रामिंग की जरूरत है!

@font-face {
   font-family: 'myface';
   src: url('file:///android_asset/fonts/myfont.ttf'); 
} 

body { 
   font-family: 'myface', serif;

...


1
अगर मैं जगह .ttfऔर .htmlएक ही निर्देशिका में फाइल और Android ब्राउज़र में यह लोड, यह काम करता है। हालाँकि, मेरे ऐप के वेब व्यू में, जबकि सीएसएस दिखाता है, .ttfप्रोजेक्ट के assets/fontsफ़ोल्डर में जोड़ने के बावजूद टेक्स्ट एंड्रॉइड के डिफ़ॉल्ट फ़ॉन्ट में दिखाई देता है । मैं 2.3.5 पर परीक्षण कर रहा हूं, लेकिन 2.1 के खिलाफ निर्माण कर रहा हूं। क्या यह समस्या हो सकती है, या ऐसा कुछ है जो मुझे याद आ रहा है?
पॉल लैमर्ट्समा

1
मुझे एक प्रस्ताव मिला: यदि आप एक HTML फ़ाइल बनाते हैं और इसे संपत्ति में रखते हैं, तो इसे view.loadUrl()काम के माध्यम से लोड किया जाता है, जबकि view.loadData()ऐसा नहीं होता है। मेरे पास कोई सुराग नहीं है कि उत्तरार्द्ध क्यों नहीं है।
पॉल लामर्ट्समा

4
एक lil 'देर से, लेकिन यह view.loadDataWithBaseUrl (अशक्त, सामग्री, माइम, एनकोडिंग, अशक्त) के साथ काम करता है
हमारा

28

यह एंड्रॉइड में किया जा सकता है। मुझे इस मुद्दे को हल करने में तीन दिन लगे। लेकिन अब यह बहुत आसान लगता है। वेबव्यू के लिए कस्टम फ़ॉन्ट सेट करने के लिए इन चरणों का पालन करें

1. अपने फ़ॉन्ट को संपत्ति फ़ोल्डर में
जोड़ें 2. एप्लिकेशन की फ़ाइल निर्देशिका में फ़ॉन्ट को कॉपी करें

private boolean copyFile(Context context,String fileName) {
        boolean status = false;
        try { 
            FileOutputStream out = context.openFileOutput(fileName, Context.MODE_PRIVATE);
            InputStream in = context.getAssets().open(fileName);
            // Transfer bytes from the input file to the output file
            byte[] buf = new byte[1024];
            int len;
            while ((len = in.read(buf)) > 0) {
                out.write(buf, 0, len);
            }
            // Close the streams
            out.close();
            in.close();
            status = true;
        } catch (Exception e) {
            System.out.println("Exception in copyFile:: "+e.getMessage());
            status = false;
        }
        System.out.println("copyFile Status:: "+status);
        return status;
    }

3. आपको केवल एक बार फ़ंक्शन के ऊपर कॉल करना होगा (आपको इसके लिए कुछ तर्क ढूंढना होगा)।

copyFile(getContext(), "myfont.ttf");

4. अपने वेबव्यू के लिए मूल्य निर्धारित करने के लिए नीचे दिए गए कोड का उपयोग करें। यहाँ मैं फ़ॉन्ट सेट करने के लिए CSS का उपयोग कर रहा हूँ।

private String getHtmlData(Context context, String data){
    String head = "<head><style>@font-face {font-family: 'verdana';src: url('file://"+ context.getFilesDir().getAbsolutePath()+ "/verdana.ttf');}body {font-family: 'verdana';}</style></head>";
    String htmlData= "<html>"+head+"<body>"+data+"</body></html>" ;
    return htmlData;
 }

5. आप ऊपर दिए गए फंक्शन को नीचे कह सकते हैं

webview.loadDataWithBaseURL(null, getHtmlData(activity,htmlData) , "text/html", "utf-8", "about:blank");

नमस्ते! मैंने इस दृष्टिकोण की कोशिश की, लेकिन WebView अभी भी मेरे फ़ॉन्ट को लोड नहीं करता है। क्या आपने कुछ खास किया है? धन्यवाद!
ज़राह

html stackoverflow.com/q/5868198/501859 के लिए कैसे करें । मेरी मदद करो अगर यू को समाधान मिल गया
किशोर

यह मेरे लिए काम करता है। धन्यवाद बाइनरी।
रवि शंकर यादव

मैं एसेट फोल्डर में फॉन्ट कर रहा हूं और बॉडी में फॉन्ट और फॉन्ट फैमिली के नाम के उस पूरे रास्ते के साथ सीएसएस बदल रहा हूं, और मॉडिफिकेशन के बाद मैं कंटेंट को फिर से लोड कर रहा हूं, लेकिन फॉन्ट चेंज इफेक्ट को तुरंत नहीं देख सकता
रवि

13

मैंने इस परिवर्धन के साथ ऊपरी उत्तरों द्वारा ऐसा किया है:

webView.loadDataWithBaseURL("file:///android_asset/",
                            WebClient.getStyledFont(someText),
                            "text/html; charset=UTF-8", null, "about:blank");

और फिर उपयोग करें src: url("file:///android_asset/fonts/YourFont...

public static String getStyledFont(String html) {
    boolean addBodyStart = !html.toLowerCase().contains("<body>");
    boolean addBodyEnd = !html.toLowerCase().contains("</body");
    return "<style type=\"text/css\">@font-face {font-family: CustomFont;" +
            "src: url(\"file:///android_asset/fonts/Brandon_reg.otf\")}" +
            "body {font-family: CustomFont;font-size: medium;text-align: justify;}</style>" +
            (addBodyStart ? "<body>" : "") + html + (addBodyEnd ? "</body>" : "");
}


सभी को धन्यवाद:)


सही जवाब !!
संवत

6

यदि आप अपनी संपत्ति फ़ोल्डर में अपनी सामग्री रखते हैं, तो उपरोक्त उत्तर में से कई काम एक आकर्षण है।

हालाँकि, यदि आप मुझे पसंद करते हैं, तो अपनी सभी परिसंपत्तियों को एक सर्वर से अपने आंतरिक भंडारण में डाउनलोड करना और सहेजना चाहते हैं loadDataWithBaseURL, जिन्हें आप आधारभूत के रूप में अपने आंतरिक भंडारण के संदर्भ में उपयोग और उपयोग कर सकते हैं । फिर सभी फाइलें लोड किए गए html के सापेक्ष होंगी और सही तरीके से पाई और उपयोग की जाएंगी।

अपने आंतरिक संग्रहण में मैंने निम्न फ़ाइलों को सहेजा है:

  • IndigoAntiqua2Text-Regular.ttf
  • style.css
  • image.png

फिर मैं निम्नलिखित कोड का उपयोग करता हूं:

WebView web = (WebView)findViewById(R.id.webby);
//For avoiding a weird error message
web.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

String webContent = "<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><link rel=\"stylesheet\" href=\"style.css\"></head>"
                            + "<body><img src='image.png' width=\"100px\"><div class=\"running\">I am a text rendered with INDIGO</div></body></html>";

String internalFilePath = "file://" + getFilesDir().getAbsolutePath() + "/";
web.loadDataWithBaseURL(internalFilePath, webContent, "text/html", "UTF-8", "");

ऊपर html (style.css) में प्रयुक्त CSS फ़ाइल:

@font-face {
  font-family: 'MyCustomRunning';
  src: url('IndigoAntiqua2Text-Regular.ttf')  format('truetype');
}

.running{
    color: #565656;
     font-family: "MyCustomRunning";
     font-size: 48px;
}

मैंने केवल minSdkVersion 19 (4.4) को लक्षित करते हुए यह कोशिश की है, इसलिए मुझे नहीं पता कि यह अन्य संस्करणों पर काम करता है या नहीं


6
 webview= (WebView) findViewById(R.id.webview);
 String myCustomStyleString="<style type=\"text/css\">@font-face {font-family: MyFont;src: url(\"file:///android_asset/fonts/iranian_sans.ttf\")}body,* {font-family: MyFont; font-size: 13px;text-align: justify;}img{max-width:100%;height:auto; border-radius: 8px;}</style>";
 webview.loadDataWithBaseURL("", myCustomStyleString+"<div style=\"direction:rtl\">"+intentpost.getStringExtra("content")+"</div>", "text/html", "utf-8", null);

2
कृपया अपना प्रश्न सुधारें कि आप क्या कर रहे हैं।
1717

2

Android के लिए वेबव्यू फ़ॉन्ट सेट करने के लिए आपको स्थानीय ttf फ़ाइल का उपयोग करने की आवश्यकता नहीं है, यह पूरे ऐप का आकार बढ़ा देगा।

आप गूगल के फॉन्ट जैसे ऑनलाइन फॉन्ट का भी इस्तेमाल कर सकते हैं ... यह आपके एपीके साइज को कम करने में मदद करेगा।

उदाहरण के लिए: नीचे दिए गए URL पर जाएँ https://gist.github.com/karimnaaji/b6c9c9e819204113e9cabf290d580551#file-googlefonts-txt

इस फ़ॉन्ट का उपयोग करने के लिए आपको आवश्यक जानकारी मिलेगी। फिर नीचे की तरह एक स्ट्रिंग बनाएं

String font = "@font-face {font-family: MyFont;src: url(\"here you will put the url of the font which you get previously\")}body {font-family: MyFont;font-size: medium;text-align: justify;}";

फिर इस तरह वेबव्यू लोड करें

webview.loadDataWithBaseURL("about:blank", "<style>" +font+</style>" + "your html contnet here", "text/html", null, null);

किया हुआ। आप इस तरह से बाहरी स्रोत से फ़ॉन्ट लोड कर पाएंगे।

अब एप फ़ॉन्ट के बारे में क्या है, यह वेबव्यू के लिए 1 फ़ॉन्ट और पूरे ऐप के लिए अलग फ़ॉन्ट का उपयोग करने का कोई मतलब नहीं है। तो आप अपने ऐप में डाउनलोड करने योग्य फ़ॉन्ट्स का उपयोग कर सकते हैं जो ऐप में फोंट लोड करने के लिए बाहरी स्रोतों का भी उपयोग करता है।


1

आप इसे CSS का उपयोग करके कर सकते हैं। मैंने इसे एक ऐप के साथ किया था लेकिन यह एंड्रॉइड 2.1 में काम नहीं करेगा क्योंकि एंड्रॉइड ब्राउज़र 2.1 के साथ एक ज्ञात बग है।


1

मुद्दा यह है कि इसे एक फ़ोल्डर में रखने की आवश्यकता है, "./myfont.ttf" को इसके बजाय, यदि "फ़ोल्डर / फॉन्ट / myfont.ttf" जैसी परिसंपत्तियों में फ़ोल्डर के अंदर फ़ॉन्ट नहीं रखा गया है, तो यह सुनिश्चित करने के लिए काम करेगा।


0

इसे परखें, मेरे लिए एक आकर्षण की तरह काम करें:

   private void setResult() {

        String mimeType = "text/html;charset=UTF-8";
        String encoding = "utf-8";
        String htmlText = htmlPrivacy;

        String text = "<html><head>"
                + "<style type=\"text/css\">@font-face {font-family: MyFont;src: url(\"file:///android_asset/fonts/iy_reg.ttf\")}body{font-family: MyFont;color: #666666}"
                + "</style></head>"
                + "<body>"
                + htmlText
                + "</body></html>";

        webView.loadDataWithBaseURL(null, text, mimeType, encoding, null);
    }

0

यदि आप res/fontमेरे जैसे फोंट डाल रहे हैं , तो आप निम्नलिखित के लिए डायर को बदल सकते हैं: -

@font-face {
     font-family: yourfont;
     src: url("file:///android_res/font/yourfont.ttf")
}
        
body {
     font-family: yourfont;
}

0

Https://github.com/delight-im/Android-AdvancedWebView लाइब्रेरी का उपयोग करें

HTML डेटा में:

<!doctype html>
<html>

<head>
<style type="text/css">
@font-face {
    font-family: MyFont;
    src: url("file:///android_asset/fonts/font1.ttf")
}
body {
    font-family: MyFont;
    font-size: medium;
    text-align: justify;
}
</style>
<meta http-equiv="Content-Type" content="text/html;  charset=utf-8">
<title>Title</title>
</head>

<body>

    ------ YOUR_CONTENT ------

</body>

</html>

xml में:

<im.delight.android.webview.AdvancedWebView
    android:id="@+id/advanced_web_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

जावा में:

advancedWebView = findViewById(R.id.advanced_web_view);
advancedWebView.loadHtml(htmlData, "text/html; charset=utf-8", "utf-8");

-3

यह है कि आप htmlData को वेबव्यू में कैसे लोड करते हैं:

webview.loadDataWithBaseURL(null, getHtmlData(activity,**htmlData**) , "text/html", "utf-8", "about:blank");

जहां getHtmlData(activity,**htmlData**)html कोड की एक स्ट्रिंग देता है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.