Как использовать собственный шрифт с WebView

Теперь я хочу отобразить некоторые символы Юникода, и я использовал тег: <font face=" Arial">something here</font>. Но похоже, что WebView не могу найти шрифт Arial, потому что я вижу только символы НЛО. Нужно ли мне куда-то копировать arial.ttf или как использовать этот шрифт TrueType с WebView? Спасибо.


android webview custom-font
person Community    schedule 27.08.2009    source источник

Ответы (10)


arrow_upward
82
arrow_downward

loadData у меня тоже не сработало, поэтому я использовал file:///android_asset в пути src.

Это сработало с loadDataWithBaseURL!

В этом примере я изменил CSS на:

@font-face {
    font-family: 'feast';
    src: url('fonts/feasfbrg.ttf');
}

body {font-family: 'feast';}

Затем используйте путь к ресурсам в качестве базового URL:

loadDataWithBaseURL("file:///android_asset/",myhtml,"text/html","utf-8",null);
person App8ite    schedule 19.09.2011
comment
У меня возникла проблема с помещением css в strings.xml. Итак, я создал строковую константу с указанным выше значением css, и она смогла показать эффект настраиваемого шрифта. Спасибо! - person Mahendra Liya; 18.09.2012
comment
Вы просто сделали мой день !! :) - person Gaurav Arora; 01.07.2013
comment
Просто убедитесь, что путь к шрифту правильный и он не начинается с / (например, '/fonts/feasfbrg.ttf') - person Marqs; 23.11.2015
comment
Ты сделал мой день!! Спасибо! Мне не хватало базового URL. - person JHawkZZ; 21.05.2020

arrow_upward
34
arrow_downward

Очевидно, вы можете использовать собственный шрифт для WebView, как предлагал @raychung выше. Но это не сработает для 2.1 (об ошибке сообщается здесь ). Это должно работать для 1.5, 1.6 и 2.2.

Вы можете поместить свой TTF-файл с пользовательским шрифтом в папку /assets, а затем в свой CSS-файл вы можете вставить:

@font-face { 
    font-family: "myIPA"; 
    src: url('IPA.TTF'); 
}
.phon, .unicode
{
    display: inline;    
    font-family: 'myIPA', Verdana, sans-serif;  
    font-size: 14pt;
    font-weight: 500;
    font-style:normal;
    color: black;
}

Теперь вы можете ссылаться на этот стиль шрифта в своем HTML-файле.

person Zarah    schedule 29.01.2011
comment
Если я помещаю файлы .ttf и .html в один и тот же каталог и загружаю их в браузер Android, он работает. Однако в моем приложении WebView, пока отображается CSS, текст отображается шрифтом Android по умолчанию, несмотря на добавление .ttf в папку assets проекта. Я тестирую 2.3.5, но строю против 2.1. Может быть, это проблема или что-то мне не хватает? - person Paul Lammertsma; 13.09.2011
comment
Я нашел решение: если вы создадите файл HTML и поместите его в активы, загрузка его через view.loadUrl() работает, а view.loadData() - нет. Я понятия не имею, почему последний не делает. - person Paul Lammertsma; 13.09.2011
comment
Привет, @Paul! Любопытно. Я уже некоторое время не пробовал работать над этой ошибкой, но когда мне понадобится, я попробую ваш обходной путь. Раньше я просто менял специальные символы на изображения в файлах HTML. - person Zarah; 13.09.2011
comment
Если это полезно, см. Мой более подробный ответ и пример. - person Paul Lammertsma; 13.09.2011
comment
К вашему сведению - это также работает, если вы хотите использовать несколько разных шрифтов для нескольких разных языков, я структурировал свое следующим образом: font-family: Verdana, sans-serif, language1, language2, language3 --- ›хотя вы должны ограничить Диапазон UTF первых двух для этого. - person Kaiesh; 09.07.2012
comment
у меня это не сработало. Я изменил URL-адрес tp src:url('file:///android_asset/TAHOMA.TTF'), и он сработал - person Bobs; 19.08.2013

arrow_upward
3
arrow_downward

Вы можете заставить его работать во всех версиях, скопировав файл шрифта из ваших ресурсов в папку с файлами при первом запуске приложения, а затем сославшись на него как:

"@font-face {
 font-family: cool_font;
 src: url('file://"+ getFilesDir().getAbsolutePath() 
  + "/cool_font.ttf');
}"
person Felipe Martinez Carreño    schedule 11.02.2011
comment
Копирование в папку с файлами у меня по-прежнему не работает. WebView по-прежнему не использует мой шрифт. Вы сделали что-нибудь особенное? - person Zarah; 02.03.2011
comment
Не совсем, при первом запуске я проверяю, был ли файл скопирован в папку с файлами, если нет, я копирую его, а затем ссылаюсь на него, как указано ранее. File f = new File(getFilesDir(), "coolFont.ttf"); if (f.length() == 0) { InputStream myInput = this.getAssets().open("fonts/coolFont.ttf"); String outFileName = "coolFont.ttf"; OutputStream myOutput = new FileOutputStream(getFilesDir() + "/" + outFileName); byte[] buffer = new byte[1024]; int length; while ((length = myInput.read(buffer)) > 0) { myOutput.write(buffer, 0, length); } myOutput.flush(); myOutput.close(); myInput.close(); } - person Felipe Martinez Carreño; 05.07.2011
comment
Мне тоже не удалось заставить это работать. Разумеется, мой шрифт отображается в каталоге /data/data/[package]/files моего приложения, и хотя WebView стилизован в соответствии с CSS, текст просто не отображается в желаемом шрифте. Я использую Android 2.1 и тестирую 2.3.5. Любая подсказка, что дает? - person Paul Lammertsma; 13.09.2011

arrow_upward
3
arrow_downward 

@font-face {
 font-family: 'MyCustomFont';
 src: url('/assets/fonts/MaycustomFont.ttf') 
}

Меня устраивает.

->src
->assets
   ->fonts
      ->MaycustomFont.ttf
->..
->res
person Benna    schedule 14.08.2013

arrow_upward
3
arrow_downward

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

            String myCustomStyleString="<style type=\"text/css\">@font-face {font-family: MyFont;src: url(\"file:///android_asset/fonts/BYEKAN.ttf\")}body,* {font-family: MyFont; font-size: medium;text-align: justify;}</style>";
                    webView.loadDataWithBaseURL("", myCustomStyleString+"<div style=\"direction:rtl\">"+myHtm+"</div>", "text/html", "utf-8", null);
person Mohsen Abdollahi    schedule 08.10.2016

arrow_upward
2
arrow_downward

У меня это не сработало, мне пришлось связать шрифт на моем веб-сервере вместо использования ссылки на локальный файл:

   @font-face {
   font-family: 'feast';
   src: url('http://yoursite.com/tutorial/css/feasfbrg.ttf');
}

body {font-family: 'feast';}
person David R.    schedule 31.08.2011

arrow_upward
2
arrow_downward

У меня это отлично работает на всех устройствах, на которых я его тестировал.

Поместите файлы шрифтов в / src / main / assets / fonts, затем используйте этот метод:

public class HTMLUtils {

    public static String getLocalFontInHTML(String html, String fontFamily, String fontFileName) {

      return "<!DOCTYPE html>\n" +
            "<html>\n" +
            "<head>\n" +
            "<style>" +
            "@font-face {" +
            "font-family: " + fontFamily + ";" +
            "src: url('" + fontFileName + "');" +
            "}" +
            "* {font-family: '" + fontFamily + "' !important;}" +
            "* {font-size: 1rem !important;}" +
            "</style>" +
            "</head>\n" +
            "<body>\n" +
            html +
            "\n" +
            "</body>\n" +
            "</html>";
     }
}

следующее

webView.loadDataWithBaseURL("file:///android_asset/", HTMLUtils.getLocalFontInHTML(item.text, Config.FONT_FAMILY, Config.REGULAR_FONT),"text/html", "UTF-8", null);

где

public static final String FONT_FAMILY = "Montserrat";

public static final String REGULAR_FONT = "fonts/Montserrat-Regular.otf";

Надеюсь, это кому-то поможет!

Если вы хотите сохранить размер шрифта в HTML-коде, удалите

 "* {font-size: 1rem !important;}"

Имейте в виду, что 1 бэр эквивалентна примерно 14 ст.

person TibiG    schedule 11.01.2018

arrow_upward
1
arrow_downward

Как сказал Фелипе Мартинес Карреньо, вы можете копировать из активов, и это будет работать.

Дополнительную информацию можно найти в этом Детали

person binary    schedule 24.03.2011

arrow_upward
1
arrow_downward

Основная идея заключается в том, что веб-страница должна иметь доступ к файлу шрифта. Вот почему предлагаемое оригинальное решение работает, когда и HTML-файл, и файл шрифта находятся в папке с ресурсами, а HTML-файл загружается оттуда.

Это не функция Android, это CSS, поэтому он должен работать с любым Android SDK.

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

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

webView.loadUrl("file:///android_asset/content.html");
person Alex    schedule 13.09.2011

arrow_upward
0
arrow_downward

использовать css

    @font-face {
     font-family: cool_font;
     src: url('cool_font.ttf');
    }
person raychung    schedule 01.05.2010