Android'de Webview'un yazı tipi yüzü nasıl değiştirilir?


97

Web görünümünün varsayılan yazı tipini özel bir yazı tipiyle değiştirmek istiyorum. Android için iki dilli bir tarayıcı uygulaması geliştirirken web görünümünü kullanıyorum.

Özel yazı tipimi varlıklara yerleştirerek bir özel yazı tipi örneği almayı denedim. Ancak yine de web görünümünün varsayılan yazı tipini yazı tipime ayarlayamadım.

Denediğim şey buydu:

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

Herkes bunu düzeltebilir mi veya web görünümünün varsayılan yazı tipini özel bir yazı tipiyle değiştirmek için başka bir yöntem önerebilir mi?

Teşekkürler!


Sonunda bunun yapılamayacağını anladım.
Dhanika


merhaba, bu yazı tipi yüzü için herhangi bir çözüm buldunuz mu, hintçe yazı tipi stackoverflow.com/q/5868198/501859 için çalışıyorum .
Çözüme sahipseniz

@Dhanika aynı sorunla karşılaşan bu sorunu nasıl çözebilirim?
NagarjunaReddy

Web görünümü metninde özel yazı tipi ayarlamak için lütfen bu bağlantıya bakın .. stackoverflow.com/a/25692052/3921740[1] [1]: stackoverflow.com/a/25692052/3921740
user3921740

Yanıtlar:


112

Bu projede bunun çalışan bir örneği var . Aşağıya kaynar:

  1. Senin içinde assets/fontsklasör (burada MyFont.otf) istenen OTF veya TTF yazı yerleştirmek
  2. assetsKlasörün içinde (burada içinde assets/demo/my_page.html) Web Görünümü içeriği için kullanacağınız bir HTML dosyası oluşturun :

    <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'yi koddan Web Görünümü'ne yükleyin:

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

HTML'yi enjekte etmeye loadData()izin verilmediğini unutmayın. Belgelere göre :

JavaScript'in aynı kaynak politikası, bu yöntem kullanılarak yüklenen bir sayfada çalışan komut dosyasının, 'http (s)' dahil 'veri' dışında herhangi bir şema kullanılarak yüklenen içeriğe erişemeyeceği anlamına geldiğini unutmayın. Bu kısıtlamadan kaçınmak için, uygun bir temel URL ile loadDataWithBaseURL () kullanın.

@JaakL'nin aşağıdaki yorumda önerdiği gibi, bir dizeden HTML yüklemek için bunun yerine varlıklarınıza işaret eden temel URL'yi sağlamalısınız:

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

Yazı tipine referans verirken htmlData, daha sonra kullanabilirsiniz /fonts/MyFont.otf(temel URL'yi atlayarak).


10
LoadData () çalışmıyor, ancak webView.loadDataWithBaseURL ("file: /// android_asset /", ... iyi çalışıyor. O zaman "/fonts/MyFont.otf" olarak yazı tipi dosyası referansı da çalışmalıdır.
JaakL

Benim durumumda, veriler ck editöründen (arka uç api) etiketler şeklinde geri dönüyor <div style = \ "text-align: center; \"> <span style = \ "background-color: transparent; \"> < font color = \ "# f20505 \" size = \ "5 \" face = \ "Comic Sans MS \"> Lütfen görüşlerinizi bizimle paylaşın <\ / font> <\ / span> Webview.loadData olarak ayarlıyorum () ancak yazı tiplerini almıyor, Herhangi bir çözüm?
B.shruti

Comic Sans MS, Android tarafından sağlanan bir yazı tipi değildir. Yalnızca yazı tipi yüzünü CSS'de tanımladıysanız ve yazı tipi dosyasını uygulamanızın varlıklarında sağladıysanız çalışır.
Paul Lammertsma

2
yazı tipim res/fontklasörde bulunur. O zaman yol ne olurdu? Denedim file:///android_res/font/ama işe yaramadı.
Wirling

106

Bu kodu kullanıyorum :

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
AMAN TANRIM! Bu tam olarak bizi neyin yanlış gittiğinin izine götüren şeydir: Görünüşe göre, Android 4.2 fontu "src: url ('... ') "cümlesi. Bunu dışarıda bırakın ve yazı tipleri güzelce işlenir. Google'ın kendi web yazı tipleriyle test edilmiştir.
Pascal Lindelauf

2
Bu harika bir çözüm, Beğen
Saad Bilal

loadDataWithBaseURL, android 4.1 ve 4.2 sürümlerinde çalışmıyor :(
Misha Akopov

android 5.1'de benim için çalışmadı. (Dan Syrstad) 'ın cevabını kullandım. font-family: 'myface';
aradaki

52

Daha da basit olanı, yazı tipine başvurmak için Varlık URL biçimini kullanabilirsiniz. Programlamaya gerek yok!

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

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

...


1
.ttfVe .htmldosyasını aynı dizine koyarsam ve Android tarayıcısına yüklersem çalışır. Ancak uygulamamın Web Görünümü'nde, CSS gösterilirken, metin .ttf, projenin assets/fontsklasörüne eklenmesine rağmen Android'in varsayılan yazı tipinde görünüyor . 2.3.5 üzerinde test ediyorum, ancak 2.1'e göre inşa ediyorum. Sorun bu olabilir mi yoksa eksik olduğum bir şey mi var?
Paul Lammertsma

1
Bir çözüm buldum: Bir HTML dosyası oluşturur ve bunu varlıklara yerleştirirseniz, view.loadUrl()işler aracılığıyla yükler , oysa view.loadData()değil. İkincisinin neden olmadığı hakkında hiçbir fikrim yok.
Paul Lammertsma

4
Bir lil 'geç, ancak view.loadDataWithBaseUrl (null, content, mime, enconding, null) ile çalışıyor
Ours

29

Android'de yapılabilir. Bu sorunu çözmem üç gün sürdü. Ama şimdi çok kolay görünüyor. Web görünümü için özel yazı tipi ayarlamak için şu adımları izleyin

1. Yazı tipinizi varlıklar klasörüne
ekleyin 2. Yazı tipini uygulamanın dosyalar dizinine kopyalayın

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. Yukarıdaki işlevi yalnızca bir kez çağırmanız gerekir (bunun için biraz mantık bulmanız gerekir).

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

4. Web görünümünüzün değerini ayarlamak için aşağıdaki kodu kullanın. Burada yazı tipini ayarlamak için CSS kullanıyorum.

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. Yukarıdaki işlevi aşağıdaki gibi çağırabilirsiniz

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

Selam! Bu yaklaşımı denedim ama Web Görünümü hala yazı tipimi yüklemiyor. Yaptığın özel bir şey var mı? Teşekkürler!
Zarah

html stackoverflow.com/q/5868198/501859 için bunun nasıl yapılacağı .
Çözüme sahipseniz

Benim için çalışıyor.Teşekkürler İkili.
Ravi Shanker Yadav

Yazı tipini varlık klasörüne alıyorum ve gövdede yazı tipi ve yazı tipi ailesinin adının tam yolu ile css değiştiriyorum ve değişiklikten sonra içeriği tekrar yüklüyorum ancak yazı tipi değiştirme efektini hemen göremiyorum
Ravi

13

Bunu, bu eklemelerle üst cevaplarla yaptım:

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

ve sonra kullan 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>" : "");
}


herkese teşekkürler:)


Mükemmel cevap!!
SANAT

6

İçeriğiniz varlıklar klasörünüzde varsa, yukarıdaki yanıtların çoğu bir çekiciliktir.

Ancak, benden hoşlanıyorsanız, tüm varlıklarınızı bir sunucudan dahili depolamanıza indirmek ve kaydetmek istiyorsanız bunun yerine loadDataWithBaseURLdahili depolamanıza baseUrl olarak bir referans kullanabilir ve kullanabilirsiniz. Daha sonra oradaki tüm dosyalar yüklenen html'ye göre olacak ve bulunup doğru şekilde kullanılacak.

Dahili depomda aşağıdaki dosyaları kaydettim:

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

Sonra şu kodu kullanıyorum:

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", "");

Yukarıdaki html'de (style.css) kullanılan CSS dosyası:

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

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

Bunu sadece minSdkVersion 19'u (4.4) hedeflerken denedim, bu yüzden diğer sürümlerde çalışıp çalışmayacağı hakkında hiçbir fikrim yok


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
Lütfen ne yaptığınızla ilgili bir açıklama ekleyerek sorunuzu geliştirin.
lifeisfoo

2

Android için webview yazı tipini ayarlamak için yerel ttf dosyasını kullanmanıza gerek yoktur, tüm uygulama boyutunu artıracaktır.

Google'ın yazı tipi gibi çevrimiçi yazı tiplerini de kullanabilirsiniz ... Bu, apk boyutunuzu azaltmanıza yardımcı olacaktır.

Örneğin: https://gist.github.com/karimnaaji/b6c9c9e819204113e9cabf290d580551#file-googlefonts-txt URL'sini ziyaret edin

Bu yazı tipini kullanmak için gerekli bilgileri bulacaksınız. sonra aşağıdaki gibi bir String oluşturun

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;}";

sonra web görünümünü bu şekilde yükleyin

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

bitti. Bu şekilde yazı tipini harici kaynaktan yükleyebilirsiniz.

Şimdi uygulama yazı tipi hakkında ne düşünüyorsunuz, web görünümü için 1 yazı tipi ve tüm uygulama için farklı yazı tipi kullanmak mantıklı değil. Böylece , uygulamada yazı tiplerini yüklemek için harici kaynaklar da kullanan uygulamanızda İndirilebilir Yazı Tiplerini kullanabilirsiniz .


1

CSS kullanarak yapabilirsiniz. Bunu bir uygulama ile yaptım ancak Android 2.1'de bilinen bir hata olduğu için Android 2.1'de çalışmayacak.


1

Sorun bir klasörde olması gerektiğidir, bunun yerine "./myfont.ttf" koymayı deneyin, eğer fontu kesinlikle işe yarayacak "fonts / myfont.ttf" gibi varlıkların içindeki bir klasöre koymazsanız.


0

test et, benim için bir cazibe gibi çalış:

   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/fontBenim gibi yazı tiplerini altına koyuyorsanız , dizini şu şekilde değiştirebilirsiniz: -

@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 kitaplığını kullanın .

html verilerinde:

<!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'de:

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

java'da:

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

-3

Bir web görünümünde htmlData'yı şu şekilde yüklersiniz:

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

burada getHtmlData(activity,**htmlData**)bir dizi html kodu döndürür.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.