Как изменить шрифт лица Webview в Android?

Я хочу изменить шрифт по умолчанию для webview на собственный шрифт. Я использую webview в разработке двуязычного браузера для Android.

Я попытался получить экземпляр пользовательского шрифта, разместив свой собственный шрифт в активах. Но по-прежнему не удалось установить шрифт по умолчанию для веб-браузера.

Это то, что я пробовал:

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

Может ли кто-нибудь исправить это или предложить какой-либо другой способ изменить шрифт веб-представления по умолчанию на собственный шрифт?

Спасибо!

Ответы

Ответ 1

Вот рабочий пример этого в этом проекте. Это сводится к:

В вашей папке assets/fonts поместите нужный шрифт OTF или TTF (здесь MyFont.otf)

Создайте 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>

Загрузите HTML в WebView из кода:

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

Обратите внимание, что ввод HTML через loadData() не разрешен. В соответствии с документацией:

Обратите внимание, что аналогичная исходная политика JavaScript означает, что script, запущенный на странице, загруженной с помощью этого метода, не сможет получить доступ к содержимому, загруженному с использованием любой другой схемы, кроме "данных", включая "http (s)". Чтобы избежать этого ограничения, используйте loadDataWithBaseURL() с соответствующим базовым URL.

Как поясняет @JaakL в комментарии ниже, для загрузки HTML из строки вместо этого вы должны указать базовый URL-адрес, указывающий на ваши активы:

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

При обращении к шрифту в htmlData вы можете просто использовать /fonts/MyFont.otf (исключая базовый URL).

Ответ 2

Я использую этот код:

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

Ответ 3

Еще проще, вы можете использовать формат URL-адреса для ссылки на шрифт. Программирование не требуется!

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

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

...

Ответ 4

Это можно сделать в Android. Я занял три дня, чтобы решить эту проблему. Но теперь это кажется очень легким. Выполните следующие шаги, чтобы установить собственный шрифт для Webview

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

Ответ 5

Я сделал это с помощью верхних ответов с этими дополнениями:

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 и использовать ссылку на свою внутреннюю память как baseUrl. Тогда все файлы там будут относительно загруженного 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", "");

Файл CSS, используемый в приведенном выше html (style.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), поэтому я понятия не имею, работает ли он в других версиях

Ответ 7

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

Ответ 8

Вы можете сделать это, используя CSS. Я сделал это с помощью приложения, но он не будет работать в Android 2.1, так как есть известная ошибка с Android 2.1.

Ответ 9

Проблема заключается в том, что она должна находиться в папке, вместо этого вместо этого помещайте "./myfont.ttf", если не помещать шрифт внутри папки в такие активы, как "fonts/myfont.ttf", который будет работать точно.

Ответ 10

Вам не нужно использовать локальный файл ttf, чтобы установить шрифт webview для Android, это увеличит размер всего приложения.

Вы также можете использовать онлайн-шрифты, такие как Google Font... Это поможет уменьшить размер вашего apk.

Например: посетите ниже 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);

сделано. Таким образом, вы сможете загрузить шрифт из внешнего источника.

Что касается шрифта приложения, то нет смысла использовать один шрифт для веб-просмотра и другой шрифт для всего приложения. Таким образом, вы можете использовать загружаемые шрифты в своем приложении, которое также использует внешние источники для загрузки шрифтов в приложении.

Ответ 11

Вот как вы загружаете htmlData в webview:

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

где getHtmlData(activity,**htmlData**) возвращает строку html-кода.