如何使用WebView自定义字体

时间:2009-08-27 22:25:49

标签: android webview custom-font

现在我想显示一些unicode字符,我使用了标签:<font face=" Arial">something here</font>。但似乎WebView无法找到Arial 字体,因为我只能看到UFO字符。我是否必须将arial.ttf复制到 某处或如何将此TrueType字体与WebView一起使用?感谢。

10 个答案:

答案 0 :(得分:76)

loadData对我也不起作用,所以我在src路径中使用了file:///android_asset

它适用于loadDataWithBaseURL

对于此示例,我将CSS更改为:

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

body {font-family: 'feast';}

然后使用资产路径作为基本网址:

loadDataWithBaseURL("file:///android_asset/",myhtml,"text/html","utf-8",null);

答案 1 :(得分:34)

显然,您可以使用WebView的自定义字体,如上面建议的@raychung。但这不适用于2.1(Bug报告为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文件中引用此字体样式。

答案 2 :(得分:3)

您可以通过在首次启动应用时将资源中的字体文件复制到文件文件夹,然后将其引用为:

,从而使其适用于所有版本
"@font-face {
 font-family: cool_font;
 src: url('file://"+ getFilesDir().getAbsolutePath() 
  + "/cool_font.ttf');
}"

答案 3 :(得分:3)

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

它对我有用。

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

答案 4 :(得分:3)

我使用以下代码用于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);

答案 5 :(得分:2)

它对我不起作用,我不得不在我的网络服务器上链接字体而不是使用对本地文件的引用:

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

body {font-family: 'feast';}

答案 6 :(得分:2)

在我测试过的所有设备上,这对我很有用。

将您的字体文件放在/ 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

答案 7 :(得分:1)

正如FelipeMartinezCarreño所说,你可以从资产中复制它,它会起作用。

您可以参考this了解更多详情

答案 8 :(得分:1)

基本思想是网页应该可以访问字体文件。这就是当HTML文件和字体文件都在assets文件夹中并且从那里加载HTML文件时,建议的原始解决方案有效的原因。

它不是Android功能,它是CSS,因此应该适用于任何Android SDK。

如果字体文件确实存在并且样式中给出了正确的路径,那么从files文件夹中加载字体也应该可以正常工作。但是这种方法比较麻烦,需要编写代码来复制文件,然后编写代码来找出文件的位置。

我很高兴只在资源中添加HTML内容和字体文件,然后从那里加载。

webView.loadUrl("file:///android_asset/content.html");

答案 9 :(得分:0)

使用css

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