web-dev-qa-db-ja.com

WebViewでカスタムフォントを使用する方法

ユニコード文字を表示したいので、タグを使用しました：<font face=" Arial">something here</font>。しかし、WebViewはUFO文字しか表示できないため、Arialフォントを見つけることができないようです。 arial.ttfをどこかにコピーする必要がありますか、またはこのTrueTypeフォントをWebViewで使用するにはどうすればよいですか？ありがとう。

androidwebviewcustom-font
58
user164542

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

明らかに、上記の@raychungが提案したように、WebViewにカスタムフォントを使用できます。しかし、これは2.1では機能しません（バグは here と報告されています）。これは、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ファイルでこのフォントスタイルを参照できます。

34
Zarah

私はペルシャ語フォントで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
Mohsen Abdollahi
@font-face {
 font-family: 'MyCustomFont';
 src: url('/assets/fonts/MaycustomFont.ttf') 
}

わたしにはできる。

->src
->assets
   ->fonts
      ->MaycustomFont.ttf
->..
->res
3
Benna

アプリの最初の起動時にアセットからファイルフォルダーにフォントファイルをコピーし、それを次のように参照することで、すべてのバージョンで動作するようになります。

"@font-face {
 font-family: cool_font;
 src: url('file://"+ getFilesDir().getAbsolutePath() 
  + "/cool_font.ttf');
}"
3
Felipe Martinez Carreño

私にとってはうまくいきませんでした。ローカルファイルへの参照を使用する代わりに、Webサーバー上のフォントをリンクする必要がありました。

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

body {font-family: 'feast';}
2
David R.

これは、テストしたすべてのデバイスでうまく機能します。

フォントファイルを/ 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
TibiG

基本的な考え方は、Webページがフォントファイルにアクセスできるようにすることです。これが、HTMLファイルとフォントファイルの両方がassetsフォルダーにあり、そこからHTMLファイルがロードされるときに、提案された元のソリューションが機能する理由です。

これはAndroid機能ではなく、CSSなので、任意のAndroid SDK。

フォントファイルが実際に存在し、スタイルへの正しいパスが指定されている場合、ファイルフォルダーからのフォントの読み込みも機能するはずです。しかし、アプローチは面倒です。ファイルをコピーするコードを作成し、次にファイルの場所を特定するコードを作成する必要があります。

アセットにHTMLコンテンツとフォントファイルを入れて、そこからロードするだけで非常に満足しています。

webView.loadUrl("file:///Android_asset/content.html");
1
Alex

フェリペ・マルティネス・カレーニョが言ったように、資産からコピーすることができ、それは機能します。

詳細については this を参照してください。

1
binary

cSSを使用

    @ font-face {
 font-family：cool_font; 
 src：url（ 'cool_font.ttf'）; 
}
0
raychung