How to embed a custom font to Android app (WebView

2019-03-22 02:56发布

问题:

I want to embed a custom font into my android app. I don't use TextView so such tutorials as this one (How to use custom font with TextView) do not help.

In my case, the content is taken from the SQLite database and shown on the screen using WebView. I don't either use bundled HTML files so this tutorial (How to use custom font with WebView) does not solve my problem, either.

FIY, here is my code:

public void initWebview()
{
    WebSettings settings = wvContent.getSettings();
    settings.setDefaultTextEncodingName("utf-8");
    setContentView(R.layout.content);
    wvContent = (WebView) findViewById(R.id.wvContent);
    wvContent.setBackgroundColor(Color.argb(250, 250, 250, 250));
    wvContent.getSettings().setSupportZoom(true);  
    wvContent.getSettings().setBuiltInZoomControls(true);       
    wvContent.setInitialScale(100); 
    wvContent.setWebViewClient(new WebViewClient()

    {
        public void onPageFinished(WebView view, String url)
        {
            if (pd != null)
            {
                pd.dismiss();
                pd = null;
            }
        }

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url)
        {
            Log.i(CONTENT_TAG,"WebView link clicked; url = " + url);
            try
            {
                String arrUrlPart[] = url.split("://");

                if (arrUrlPart[0].equals("entry"))
                {
                    String content = getContentByWord(arrUrlPart[1]);
                    showContent(content);
                }
                else if (arrUrlPart[0].equals("http"))
                {
                     try {                             
                         startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url)));                              
                     } catch (Exception ex) {
                         // TODO Auto-generated catch block
                         ex.printStackTrace();
                     }                      
                }
            }
            catch (Exception ex)
            {
                ex.printStackTrace();
            }
            return true;
        }
    });
}

The font stored in assets/fonts seems to be embedded into the app, and my questions are:

  1. How can I programmatically do to "force" my app to use this font?
  2. Are there any solutions to my problem?

Thank you very much.

回答1:

From the comments in this reply, a possible solution seems to be to use loadDataWithBaseURL while providing the assets folder as the base url, i.e.

LoadData() does not work, but webView.loadDataWithBaseURL("file:///android_asset/",... works fine. Then also font file reference as "/fonts/MyFont.otf" should work. – JaakL Dec 1 '11 at 16:59

I assume bundling your font is not a problem, right?

[Edit] To clarify my answer, I've composed a little example. In the code below, I've put the Quicksand_Dash.otf in assets/fonts, and twitter_logo.png straight into assets. The HTML is simply a string constant, but you'd retrieve it from your SQLLite database. The essence is really just to use loadDataWithBaseURL()....

package oh.jolly.webview;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class WebviewTestActivity extends Activity {

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        WebView webView = (WebView) findViewById(R.id.webview);
        webView.loadDataWithBaseURL("file:///android_asset/", PAGE_HTML, "text/html", "UTF-8", "null" );
    }

    private final static String PAGE_HTML =
        "<html>\n" +
        "  <style type=\"text/css\"> \n" + 
        "   @font-face { \n" + 
        "       font-family: MyFont; \n" + 
        "       src: url(\"file:///android_asset/fonts/Quicksand_Dash.otf\") \n" + 
        "   } \n" + 
        "   body { \n" + 
        "       font-family: MyFont; \n" + 
        "       font-size: medium; \n" + 
        "       text-align: justify; \n" + 
        "   } \n" + 
        "  </style> \n" + 
        "  <body>\n" + 
        "    I've got a sinking feeling...<br>\n" + 
        "    <img src=\"file:///android_asset/twitter_logo.png\" />\n" + 
        "  </body>\n" + 
        "</html>";


}


回答2:

Please check below links ... i think its useful

How to change font face of Webview in Android?

How to use custom font with WebView

Set your custom font on html header and set your content in html body. so all content display as per your embed font in webview...