Bagaimana cara mengubah tampilan font Webview di Android?

97

Saya ingin mengubah font default tampilan web menjadi font kustom. Saya menggunakan tampilan web dalam mengembangkan aplikasi browser dwibahasa untuk Android.

Saya mencoba mendapatkan contoh jenis huruf khusus dengan menempatkan font khusus saya di aset. Tapi masih tidak bisa menyetel font default tampilan web ke font saya.

Inilah yang saya coba:

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

Adakah yang bisa memperbaiki ini atau menyarankan metode lain untuk mengubah font default tampilan web ke font kustom?

Terima kasih!

android  webview  font-face  custom-font 
— Dhanika
sumber
Akhirnya saya menyadari bahwa ini tidak bisa dilakukan.
— Dhanika
— Samuel
hai apakah Anda menemukan solusi untuk hal font face ini, saya mencoba untuk font hindi stackoverflow.com/q/5868198/501859 . bantu saya jika Anda mendapatkan solusinya
— Kishore
@Dhanika bagaimana mengatasi masalah ini menghadapi masalah yang sama.
— NagarjunaReddy
Silakan lihat tautan ini untuk menyetel font khusus di teks tampilan web .. stackoverflow.com/a/25692052/3921740[1] [1]: stackoverflow.com/a/25692052/3921740
— pengguna3921740

Jawaban:

111

Ada contoh kerja untuk ini dalam proyek ini . Itu bermuara pada:

  1. Di assets/fontsfolder Anda , tempatkan font OTF atau TTF yang diinginkan (di sini MyFont.otf)

  2. Buat file HTML yang akan Anda gunakan untuk konten WebView, di dalam assetsfolder (di sini di dalam 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. Muat HTML ke WebView dari kode:

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

Perhatikan bahwa menyuntikkan HTML melalui loadData()tidak diizinkan. Sesuai dokumentasi :

Perhatikan bahwa kebijakan asal JavaScript yang sama berarti bahwa skrip yang berjalan di halaman yang dimuat menggunakan metode ini tidak akan dapat mengakses konten yang dimuat menggunakan skema apa pun selain 'data', termasuk 'http (s)'. Untuk menghindari pembatasan ini, gunakan loadDataWithBaseURL () dengan URL dasar yang sesuai.

Seperti yang disarankan @JaakL pada komentar di bawah, untuk memuat HTML dari string, Anda harus memberikan URL dasar yang mengarah ke aset Anda:

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

Saat mereferensikan font masuk htmlData, Anda dapat menggunakan /fonts/MyFont.otf(menghilangkan URL dasar).

— Paul Lammertsma
sumber
10
LoadData () tidak berfungsi, tetapi webView.loadDataWithBaseURL ("file: /// android_asset /", ... berfungsi dengan baik. Kemudian juga referensi file font seperti "/fonts/MyFont.otf" harus berfungsi.
— JaakL
Dalam kasus saya, data dikembalikan dalam bentuk tag dari ck editor (backend api) <div style = \ "text-align: center; \"> <span style = \ "background-color: transparent; \"> < font color = \ "# f20505 \" size = \ "5 \" face = \ "Comic Sans MS \"> Bagikan tanggapan Anda dengan kami <\ / font> <\ / span> Saya menyetelnya sebagai webview.loadData () tetapi tidak mengambil font, Ada solusi ??
— B.shruti
Comic Sans MS bukanlah font yang disediakan oleh Android. Ini hanya akan berfungsi jika Anda telah menentukan bentuk font di CSS dan menyediakan file font di aset aplikasi Anda.
— Paul Lammertsma
2
font saya terletak di res/fontfolder. Lalu apa jalannya? Saya mencoba file:///android_res/font/tetapi tampaknya tidak berhasil.
— Wirling
105

Saya menggunakan kode ini :

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);
— Omid Omidi
sumber
2
OH TUHAN! INILAH yang menempatkan kita pada jejak kesalahan: ternyata, Android 4.2 TIDAK merender font jika Anda menambahkan "format ('ttf')" di belakang "src: url ('... ') ". Tinggalkan itu dan font akan ditampilkan dengan indah. Diuji dengan font web Google sendiri.
— Pascal Lindelauf
2
Ini adalah solusi yang luar biasa, Jempol ke atas
— Saad Bilal
loadDataWithBaseURL tidak berfungsi pada versi Android 4.1 dan 4.2 :(
— Misha Akopov
tidak berhasil untuk saya di Android 5.1. Saya menggunakan jawaban (Dan Syrstad). perbedaannya adalah kutipanfont-family: 'myface';
— Mneckoee
52

Lebih sederhana lagi, Anda dapat menggunakan format URL Aset untuk mereferensikan font. Tidak perlu pemrograman!

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

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

...

— Dan Syrstad
sumber
1
Jika saya menempatkan file .ttfdan .htmldi direktori yang sama dan memuatnya di browser Android, itu berfungsi. Namun di WebView aplikasi saya, saat CSS ditampilkan, teks muncul dalam font default Android meskipun menambahkan .ttfke assets/fontsfolder proyek . Saya menguji pada 2.3.5, tetapi membangunnya dengan 2.1. Mungkinkah itu masalahnya, atau ada sesuatu yang saya lewatkan?
— Paul Lammertsma
1
Saya menemukan resolusi: jika Anda membuat file HTML dan menempatkannya di aset, memuatnya melalui view.loadUrl()karya, sedangkan view.loadData()tidak. Saya tidak tahu mengapa yang terakhir tidak.
— Paul Lammertsma
4
Sedikit terlambat, tetapi berfungsi dengan view.loadDataWithBaseUrl (null, content, mime, enconding, null)
— Kami
28

Itu bisa dilakukan di Android. Saya membutuhkan waktu tiga hari untuk menyelesaikan masalah ini. Tapi sekarang sepertinya sangat mudah. Ikuti langkah-langkah berikut untuk menyetel font khusus untuk Webview

1. Tambahkan font Anda ke folder aset
2. Salin font ke direktori file aplikasi

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. Anda harus memanggil fungsi di atas hanya sekali (Anda harus menemukan beberapa logika untuk ini).

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

4. Gunakan kode di bawah ini untuk menetapkan nilai tampilan web Anda. Di sini saya menggunakan CSS untuk mengatur font.

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. Anda dapat memanggil fungsi di atas seperti di bawah ini

webview.loadDataWithBaseURL(null, getHtmlData(activity,htmlData) , "text/html", "utf-8", "about:blank");
— biner
sumber
Hai! Saya mencoba pendekatan ini tetapi WebView masih tidak memuat font saya. Apakah ada hal spesial yang kamu lakukan? Terima kasih!
— Zarah
bagaimana melakukan itu untuk html stackoverflow.com/q/5868198/501859 . bantu saya jika Anda mendapatkan solusinya
— Kishore
Ini Bekerja untuk saya. Terima kasih Binary.
— Ravi Shanker Yadav
saya memiliki font di folder aset dan mengubah css dengan jalur lengkap font dan nama keluarga font di badan, dan setelah modifikasi saya memuat konten lagi tetapi tidak dapat langsung melihat efek perubahan font
— Ravi
13

saya melakukan ini dengan jawaban atas dengan tambahan ini:

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

dan kemudian gunakan 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>" : "");
}


terima kasih untuk semuanya :)

— Vlad
sumber
Jawaban Sempurna !!
— SANAT
6

Banyak dari jawaban di atas berfungsi sebagai pesona jika Anda memiliki konten Anda di folder aset Anda.

Namun, jika Anda menyukai saya ingin mengunduh dan menyimpan semua aset Anda dari server ke penyimpanan internal, Anda dapat menggunakan loadDataWithBaseURLdan menggunakan referensi ke penyimpanan internal sebagai baseUrl. Kemudian semua file di sana akan terkait dengan html yang dimuat dan ditemukan serta digunakan dengan benar.

Di penyimpanan internal saya, saya telah menyimpan file-file berikut:

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

Kemudian saya menggunakan kode berikut:

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

File CSS yang digunakan di html di atas (style.css):

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

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

Saya hanya mencoba ini sambil menargetkan minSdkVersion 19 (4.4) jadi saya tidak tahu apakah ini berfungsi pada versi lain

— lejonl
sumber
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);
— Mendukung proyek Pfr
sumber
2
Harap perbaiki pertanyaan Anda dengan menambahkan penjelasan tentang apa yang Anda lakukan.
— lifeisfoo
2

Anda tidak perlu menggunakan file ttf lokal untuk mengatur font webview untuk android, Ini akan meningkatkan ukuran aplikasi secara keseluruhan.

Anda juga dapat menggunakan font online seperti font google ... Ini akan membantu mengurangi ukuran apk Anda.

Misalnya: kunjungi URL di bawah ini https://gist.github.com/karimnaaji/b6c9c9e819204113e9cabf290d580551#file-googlefonts-txt

Anda akan menemukan info yang diperlukan untuk menggunakan font ini. lalu buat String seperti di bawah ini

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

lalu muat tampilan web seperti ini

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

selesai. Anda dapat memuat font dari sumber eksternal dengan cara ini.

Sekarang bagaimana dengan font aplikasi, tidak masuk akal untuk menggunakan 1 font untuk tampilan web dan font yang berbeda untuk keseluruhan aplikasi. Jadi, Anda dapat menggunakan Font yang Dapat Diunduh di aplikasi Anda yang juga menggunakan sumber eksternal untuk memuat font di aplikasi.

— Afjalur Rahman Rana
sumber
1

Anda dapat melakukannya dengan menggunakan CSS. Saya melakukannya dengan aplikasi tetapi tidak berfungsi di Android 2.1 karena ada bug yang diketahui dengan browser Android 2.1.

— Mayu Mayooresan
sumber
1

Masalahnya adalah itu harus berada di folder, coba letakkan "./myfont.ttf" sebagai gantinya, jika tidak letakkan font di dalam folder di aset seperti "font / myfont.ttf" yang akan berfungsi dengan pasti.

— Nathan Schwermann
sumber
0

mengujinya, bekerja untuk saya seperti pesona:

   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);
    }
— sana ebadi
sumber
0

Jika Anda meletakkan font di bawah res/fontseperti saya, maka Anda dapat mengubah dir sebagai berikut: -

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

Gunakan https://github.com/delight-im/Android-AdvancedWebView library.

dalam data 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>

dalam xml:

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

di jawa:

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

Ini adalah bagaimana Anda memuat htmlData dalam tampilan web:

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

di mana getHtmlData(activity,**htmlData**)mengembalikan string kode html.

— Alex Aung
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.