Используйте собственный шрифт из res / font с WebView в Android

Я хочу изменить начертание шрифта строки html, загруженной в WebView, аналогично тому, как указано в этом вопросе:

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

Разница в том, что я не использую старый подход, когда вы храните файлы шрифтов в папке с ресурсами, но я сохраняю их в res / font, как описано в документации по поддержке шрифтов Android "Шрифты в XML":

https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html

Теперь я, очевидно, не могу использовать:

file:///android_asset/fonts/my_font.otf

Я пытался:

file:///android_res/font/my_font.otf

и многие другие способы описания пути к моему шрифту внутри папки res / font, но ни один из них не работает.

Как использовать настраиваемое семейство шрифтов для WebView, загружающего строку html, если мой шрифт хранится в папке res / font?

//Редактировать:

Моя текущая реализация, которая не работает:

@BindingAdapter("loadData")
public static void loadData(WebView webView, String htmlData) {
    webView.loadDataWithBaseURL(null, htmlData, "text/html", "utf-8", null);
}

@BindingAdapter({"loadData", "fontFamily"})
public static void loadData(WebView webView, String htmlData, @FontRes int fontFamilyId) {
    TypedValue value = new TypedValue();
    ApplicationActivity.getSharedApplication().getResources().getValue(fontFamilyId, value, true);
    String fontPath = value.string.toString();
    File fontFile = new File(fontPath);

    String prefix = "<html>\n"
            +"\t<head>\n"
            +"\t\t<style type=\"text/css\">\n"
            +"\t\t\t@font-face {\n"
            +"\t\t\t\tfont-family: 'CustomFont';\n"
            +"\t\t\t\tsrc: url(\"file:///android_res/font/"+fontFile.getName()+"\")\n"
            +"\t\t\t}\n"
            +"\t\t\tbody {\n"
            +"\t\t\t\tfont-family: 'CustomFont';\n"
            +"\t\t\t}\n"
            +"\t\t</style>\n"
            +"\t</head>\n"
            +"\t<body>\n";
    String postfix = "\t</body>\n</html>";

    loadData(webView, prefix + htmlData + postfix);
}

android webview fonts font-face custom-font
person 1daemon1    schedule 21.09.2017    source источник
comment
Возможный дубликат Как изменить начертание шрифта Webview в Android? < / а>   -  person Kunu    schedule 21.09.2017
comment
Это не дубликат. Я упомянул эту тему - в ней описывается загрузка шрифтов из папки с ресурсами, я говорю о загрузке шрифтов из папки res и новой поддержке шрифтов Android.   -  person 1daemon1    schedule 21.09.2017
comment
Почему не менять шрифт с помощью css?   -  person Steven    schedule 21.09.2017
comment
@ Стивен, разве это не то, что я пытаюсь сделать? Я использую css для изменения шрифта, просто не знаю, как указать путь к шрифту в папке res / font.   -  person 1daemon1    schedule 22.09.2017
comment
Я имею в виду, почему это так. Когда можно просто создать файл css и изменить стиль в своем?   -  person Steven    schedule 22.09.2017
comment
Хороший вопрос, особенно относительно новой возможности Android Studio 3 поддерживать шрифты, добавляемые напрямую через папку res / font.   -  person Elementary    schedule 09.11.2017

Ответы (3)


arrow_upward
13
arrow_downward

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

Пример HTML

<html>
<head>
    <style>
        @font-face {
            font-family: 'CustomFont';
            src: url('font/CustomFont.ttf');
        }
        #font {
            font-family: 'CustomFont';
        }
    </style>
</head>
<body>
    <p>No Font</p>
    <br />
    <p id="font">Font</p>
</body>

load this HTML into the webview using Webview#loadDataWithBaseURL(String, String, String, String, String), using file://android_res/ as the base url (first param)

Пример:

webview.loadDataWithBaseURL("file:///android_res/", html, "text/html", "utf-8", null)

Редактировать:

Если вы используете proguard в своих сборках, вам необходимо добавить дополнительные правила, чтобы предотвратить переименование класса R во время процесса ProGuard, иначе WebView не сможет найти ресурс шрифта. Подробности можно найти в этом сообщении

person hibob    schedule 01.11.2017
comment
Привет, это действительно работает? Я пробую, но исключение журнала webview Невозможно открыть URL-адрес ресурса: file: ///android_res/font/ubuntu_regular.ttf java.lang.ClassNotFoundException: не нашел класс com.xxx.yyy.zzz.R $ font на пути: - person Petr Daňa; 19.03.2018
comment
@ PetrDaňa сам столкнулся с этой проблемой, похоже, это проблема только с защищенными сборками, вызванная тем фактом, что proguard переименовывает файл ресурсов R, и поэтому веб-просмотр не может его найти. Решение - использовать правила proguard, перечисленные в этом сообщении < / а> - person hibob; 04.07.2018
comment
у меня не работает: Failed to load resource: net::ERR_FILE_NOT_FOUND в консоли WebViews - person Till Krempel; 24.09.2018
comment
Для тех, у кого есть исключение типа java.lang.ClassNotFoundException: Didn't find class "your.package.name.R$font". Причина может заключаться в том, что у вас разные applicationId для отладки / выпуска или адаптированных сборок. Вы можете найти объяснение здесь: stackoverflow.com/questions/23469712/ - person Kirill Starostin; 23.07.2019

arrow_upward
10
arrow_downward

Мне удалось загрузить мой локальный шрифт из каталога res/font. В моем примере я хочу загрузить openans курсивом.

Мои настройки следующие:

  1. css внутри каталога assets
  2. используйте это для установки шрифта
    @font-face {
      font-family: 'opensans';
      src: url("file:///android_res/font/opensans_italic.ttf")
    }

    body {
      font-family: 'opensans';
      font-weight: 400;
    }

  1. Загрузите WebView, используя loadDataWithBaseUrl, например:

    webView.loadDataWithBaseURL(null, yourHtmlContent, "text/html", "utf-8", null)

    Но у меня это вверху моего html-контента: "<link rel='stylesheet' type='text/css' href='file:///android_asset/mycss.css' />”

    Надеюсь, это сработает и в вашем случае.

Редактировать:

Добавьте это в конфигурацию proguard, чтобы он работал в режиме выпуска.

-keep class com.your.package.name.R$font { *; }

person Reza    schedule 04.01.2019
comment
работал у меня, не забудьте создать папку шрифтов в res, щелкнув правой кнопкой мыши - ›new -› Android Resource Directory. а также имя может быть только крошечным с _, а не - - person Aqua Freshka; 29.07.2020

arrow_upward
2
arrow_downward

Вы можете использовать собственный шрифт res, например:

<head>
<style type="text/css">
    @font-face {
        font-family: MyFont;
        src: url("file:///res/font/myfont.ttf")
    }
    body {
        font-family: MyFont;
    }
</style>

person Harsh    schedule 14.06.2018