Как использовать пользовательский шрифт с WebView - PullRequest
Новая
       135

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

57 голосов
/ 28 августа 2009

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

Ответы [ 10 ]

76 голосов
/ 19 сентября 2011

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);
34 голосов
/ 29 января 2011

Видимо, вы можете использовать собственный шрифт для 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-файле.

3 голосов
/ 08 октября 2016

Я использовал приведенный ниже код для направления 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);
3 голосов
/ 14 августа 2013 
@font-face {
 font-family: 'MyCustomFont';
 src: url('/assets/fonts/MaycustomFont.ttf') 
}

Это работает для меня. 

->src
->assets
   ->fonts
      ->MaycustomFont.ttf
->..
->res
3 голосов
/ 11 февраля 2011

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

"@font-face {
 font-family: cool_font;
 src: url('file://"+ getFilesDir().getAbsolutePath() 
  + "/cool_font.ttf');
}"
2 голосов
/ 11 января 2018

Это прекрасно работает на всех устройствах, на которых я его тестировал.

Поместите файлы шрифтов в / 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;}"

Имейте в виду, что 1rem эквивалентен приблизительно 14sp

2 голосов
/ 31 августа 2011

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

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

body {font-family: 'feast';}
1 голос
/ 13 сентября 2011

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

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

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

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

webView.loadUrl("file:///android_asset/content.html");
1 голос
/ 24 марта 2011

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

Вы можете сослаться это для более подробной информации

0 голосов
/ 01 мая 2010

используйте CSS 

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