Làm cách nào để thay đổi phông chữ của Webview trong Android?

97

Tôi muốn thay đổi phông chữ mặc định của webview thành phông chữ tùy chỉnh. Tôi đang sử dụng webview để phát triển ứng dụng trình duyệt song ngữ cho Android.

Tôi đã thử lấy một phiên bản của kiểu chữ tùy chỉnh bằng cách đặt phông chữ tùy chỉnh của mình vào nội dung. Nhưng vẫn không thể đặt phông chữ mặc định của webview thành phông chữ của tôi.

Đây là những gì tôi đã thử:

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

Có ai có thể sửa lỗi này hoặc đề xuất bất kỳ phương pháp nào khác để thay đổi phông chữ mặc định của webview thành phông chữ tùy chỉnh không?

Cảm ơn!

android  webview  font-face  custom-font 
— Dhanika
nguồn
Cuối cùng tôi nhận ra rằng điều này không thể được thực hiện.
— Dhanika
kiểm tra điều này. stackoverflow.com/questions/1344080/…
— Samuel
xin chào, bạn đã tìm thấy giải pháp nào cho vấn đề về mặt phông chữ này chưa, tôi đang thử cho phông chữ tiếng Hin-ddi stackoverflow.com/q/5868198/501859 . giúp tôi nếu bạn có giải pháp
— Kishore
@Dhanika làm thế nào để giải quyết vấn đề này đối mặt với cùng một vấn đề.
— NagarjunaReddy
Vui lòng tham khảo liên kết này để đặt phông chữ tùy chỉnh trong văn bản chế độ xem web .. stackoverflow.com/a/25692052/3921740[1] [1]: stackoverflow.com/a/25692052/3921740
— user3921740

Câu trả lời:

111

Có một ví dụ làm việc về điều này trong dự án này . Nó đun sôi xuống:

  1. Trong assets/fontsthư mục của bạn , đặt phông chữ OTF hoặc TTF mong muốn (tại đây MyFont.otf)

  2. Tạo tệp HTML mà bạn sẽ sử dụng cho nội dung của WebView, bên trong assetsthư mục (bên trong đây 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. Tải HTML vào WebView từ mã:

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

Lưu ý rằng loadData()không được phép đưa HTML qua . Theo tài liệu :

Lưu ý rằng chính sách gốc của JavaScript có nghĩa là tập lệnh chạy trong một trang được tải bằng phương pháp này sẽ không thể truy cập nội dung được tải bằng bất kỳ lược đồ nào khác ngoài 'dữ liệu', bao gồm 'http (s)'. Để tránh hạn chế này, hãy sử dụng loadDataWithBaseURL () với một URL cơ sở thích hợp.

Như @JaakL đề xuất trong nhận xét bên dưới, để tải HTML từ một chuỗi, thay vào đó, bạn nên cung cấp URL cơ sở trỏ đến nội dung của mình:

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

Khi tham chiếu đến phông chữ trong htmlData, bạn có thể chỉ cần sử dụng /fonts/MyFont.otf(bỏ qua URL cơ sở).

— Paul Lammertsma
nguồn
10
LoadData () không hoạt động, nhưng webView.loadDataWithBaseURL ("tệp: /// android_asset /", ... hoạt động tốt. Sau đó, tham chiếu tệp phông chữ là "/fonts/MyFont.otf" sẽ hoạt động.
— JaakL
Trong trường hợp của tôi, dữ liệu đang trả về dưới dạng thẻ từ trình chỉnh sửa ck (api phụ trợ) <div style = \ "text-align: center; \"> <span style = \ "background-color: transparent; \"> < font color = \ "# f20505 \" size = \ "5 \" face = \ "Comic Sans MS \"> Vui lòng chia sẻ phản hồi của bạn với chúng tôi <\ / font> <\ / span> Tôi đang đặt nó làm webview.loadData () nhưng nó không lấy phông chữ, Bất kỳ giải pháp nào ??
— B.shruti
Comic Sans MS không phải là phông chữ do Android cung cấp. Nó sẽ chỉ hoạt động nếu bạn đã xác định mặt phông chữ trong CSS và cung cấp tệp phông chữ trong nội dung ứng dụng của bạn.
— Paul Lammertsma
2
phông chữ của tôi nằm trong res/fontthư mục. Con đường lúc đó sẽ như thế nào? Tôi đã thử file:///android_res/font/nhưng dường như không hiệu quả.
— Wirling
105

Tôi đang sử dụng mã này :

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
nguồn
2
CHÚA ƠI! Đây chính xác là những gì đưa chúng ta vào dấu vết của những gì đã xảy ra: hóa ra, Android 4.2 KHÔNG hiển thị phông chữ nếu bạn thêm "format ('ttf')" phía sau "src: url ('... mệnh đề ') ". Bỏ điều đó ra và các phông chữ được hiển thị đẹp mắt. Đã thử nghiệm với phông chữ web của riêng Google.
— Pascal Lindelauf
2
Đây là giải pháp gây chấn động, Thích
— Saad Bilal
loadDataWithBaseURL không làm việc trên android 4.1 và 4.2 phiên bản :(
— Misha Akopov
không hoạt động đối với tôi trong Android 5.1. Tôi đã sử dụng câu trả lời của (Dan Syrstad). sự khác biệt là báo giáfont-family: 'myface';
— Mneckoee
52

Đơn giản hơn nữa, bạn có thể sử dụng định dạng URL nội dung để tham chiếu phông chữ. Không cần lập trình!

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

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

...

— Dan Syrstad
nguồn
1
Nếu tôi đặt .ttfvà .htmltập tin trong cùng một thư mục và tải nó lên trong trình duyệt Android, nó sẽ hoạt động. Tuy nhiên, trong WebView của ứng dụng của tôi, trong khi CSS hiển thị, văn bản xuất hiện trong phông chữ mặc định của Android mặc dù đã thêm vào thư mục .ttfcủa dự án assets/fonts. Tôi đang thử nghiệm trên 2.3.5, nhưng xây dựng dựa trên 2.1. Đó có thể là vấn đề, hoặc có điều gì đó tôi đang thiếu?
— Paul Lammertsma,
1
Tôi đã tìm thấy một giải pháp: nếu bạn tạo một tệp HTML và đặt nó trong phần tử, tải nó qua view.loadUrl()các công trình, trong khi view.loadData()thì không. Tôi không có manh mối tại sao sau này không.
— Paul Lammertsma
4
Một lil' muộn, nhưng nó hoạt động với view.loadDataWithBaseUrl (null, nội dung, kịch câm, enconding, null)
— Chúng ta
28

Nó có thể được thực hiện trong Android. Tôi đã mất ba ngày để giải quyết vấn đề này. Nhưng bây giờ nó có vẻ rất dễ dàng. Làm theo các bước sau để đặt phông chữ tùy chỉnh cho Webview

1. Thêm phông chữ của bạn vào thư mục
nội dung 2. Sao chép phông chữ vào thư mục tệp của ứng dụng

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. Bạn chỉ phải gọi hàm trên một lần (bạn phải tìm một số logic cho việc này).

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

4.Sử dụng mã bên dưới để đặt giá trị cho chế độ xem web của bạn. Ở đây tôi đang sử dụng CSS để đặt phông chữ.

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. bạn có thể gọi hàm trên như bên dưới

webview.loadDataWithBaseURL(null, getHtmlData(activity,htmlData) , "text/html", "utf-8", "about:blank");
— nhị phân
nguồn
Chào! Tôi đã thử cách tiếp cận này nhưng WebView vẫn không tải phông chữ của tôi. Có điều gì đặc biệt bạn đã làm không? Cảm ơn!
— Zarah
cách thực hiện điều đó cho html stackoverflow.com/q/5868198/501859 . giúp tôi nếu bạn có giải pháp
— Kishore
Nó hoạt động cho tôi. Cảm ơn Binary.
— Ravi Shanker Yadav
Tôi đang có phông chữ trong thư mục tài sản và thay đổi css với đường dẫn hoàn chỉnh của phông chữ và tên họ phông chữ trong nội dung, và sau khi sửa đổi, tôi đang tải lại nội dung nhưng không thể thấy hiệu ứng thay đổi phông chữ ngay lập tức
— Ravi
13

tôi đã thực hiện điều này bằng các câu trả lời phía trên với phần bổ sung này:

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

và sau đó sử dụng 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>" : "");
}


cảm ơn tất cả mọi người:)

— Vlad
nguồn
Câu trả lời hoàn hảo!!
— SANAT
6

Nhiều câu trả lời ở trên hoạt động tốt nếu bạn có nội dung của mình trong thư mục nội dung.

Tuy nhiên, nếu bạn thích tôi muốn tải xuống và lưu tất cả nội dung của bạn từ máy chủ vào bộ nhớ trong, bạn có thể sử dụng loadDataWithBaseURLvà sử dụng tham chiếu đến bộ nhớ trong của mình dưới dạng baseUrl. Sau đó, tất cả các tệp ở đó sẽ có liên quan đến html được tải và được tìm thấy và sử dụng đúng cách.

Trong bộ nhớ trong của mình, tôi đã lưu các tệp sau:

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

Sau đó, tôi sử dụng mã sau:

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

Tệp CSS được sử dụng trong html ở trên (style.css):

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

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

Tôi mới chỉ thử điều này khi nhắm mục tiêu minSdkVersion 19 (4.4) nên tôi không biết nó có hoạt động trên các phiên bản khác không

— lejonl
nguồn
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);
— Suport Pfrproject
nguồn
2
Vui lòng cải thiện câu hỏi của bạn bằng cách thêm giải thích về những gì bạn đang làm.
— lifeisfoo
2

Bạn không cần sử dụng tệp ttf cục bộ để đặt phông chữ webview cho android, Nó sẽ tăng kích thước toàn bộ ứng dụng.

bạn cũng có thể sử dụng các phông chữ trực tuyến như phông chữ của google ... Nó sẽ giúp giảm dung lượng apk của bạn.

Ví dụ: truy cập URL bên dưới https://gist.github.com/karimnaaji/b6c9c9e819204113e9cabf290d580551#file-googlefonts-txt

Bạn sẽ tìm thấy thông tin cần thiết để sử dụng phông chữ này. sau đó tạo một chuỗi như bên dưới

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

sau đó tải trang web như thế này

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

làm xong. Bạn sẽ có thể tải phông chữ từ nguồn bên ngoài theo cách này.

Bây giờ thì sao về phông chữ ứng dụng, sẽ không hợp lý khi sử dụng 1 phông chữ cho chế độ xem web và phông chữ khác cho toàn bộ ứng dụng. Vì vậy, bạn có thể sử dụng Phông chữ có thể tải xuống trong ứng dụng của mình, cũng sử dụng các nguồn bên ngoài để tải phông chữ trong ứng dụng.

— Afjalur Rahman Rana
nguồn
1

Bạn có thể làm điều đó bằng cách sử dụng CSS. Tôi đã làm điều đó với một ứng dụng nhưng nó sẽ không hoạt động trong Android 2.1 vì có một lỗi đã biết với trình duyệt Android 2.1.

— Mayu Mayooresan
nguồn
1

Vấn đề là nó cần phải nằm trong một thư mục, hãy thử đặt "./myfont.ttf", nếu không hãy đặt phông chữ bên trong một thư mục trong các nội dung như "font / myfont.ttf" chắc chắn sẽ hoạt động.

— Nathan Schwermann
nguồn
0

thử nghiệm nó, làm việc cho tôi như một cái duyên:

   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
nguồn
0

Nếu bạn đang đặt phông chữ res/fontnhư tôi, thì bạn có thể thay đổi dir thành như sau: -

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

Sử dụng thư viện https://github.com/delight-im/Android-AdvancedWebView .

trong dữ liệu 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>

trong xml:

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

trong java:

advancedWebView = findViewById(R.id.advanced_web_view);
advancedWebView.loadHtml(htmlData, "text/html; charset=utf-8", "utf-8");
— Tải xuống Arman
nguồn
-3

Đây là cách bạn tải htmlData trong một trang web:

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

nơi getHtmlData(activity,**htmlData**)trả về một chuỗi mã html.

— Alex Aung
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.