【问题标题】:How to use custom font with WebView如何在 WebView 中使用自定义字体
【发布时间】:2010-11-23 13:33:36
【问题描述】:

现在我想显示一些 unicode 字符,我使用了标签:<font face=" Arial">something here</font>。但是WebView好像找不到Arial 字体,因为我只能看到不明飞行物字符。我是否必须将 arial.ttf 复制到 在某处,或者我如何将这种 TrueType 字体与WebView 一起使用?谢谢。

【问题讨论】:

    标签: android webview custom-font


    【解决方案1】:

    使用css

     @font-face {
         字体家族:cool_font;
         src: url('cool_font.ttf');
        }
    

    【讨论】:

      【解决方案2】:

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

      【讨论】:

      • 如果我将.ttf.html 文件放在同一目录中并在Android 浏览器中加载它,它就可以工作。然而,在我的应用程序的 WebView 中,虽然 CSS 显示,但文本以 Android 的默认字体显示,尽管将 .ttf 添加到项目的 assets 文件夹中。我在 2.3.5 上进行测试,但针对 2.1 进行构建。这可能是问题所在,还是我遗漏了什么?
      • 我找到了一个解决方案:如果您创建一个 HTML 文件并将其放在资产中,则通过 view.loadUrl() 加载它可以正常工作,而 view.loadData() 则不能。我不知道为什么后者没有。
      • 嘿@Paul!这很好奇。我已经有一段时间没有尝试解决这个错误了,但是当我需要时,我会尝试你的解决方法。我之前所做的只是将特殊字符更改为 HTML 文件中的图像。
      • 仅供参考 - 如果您想为多种不同的语言输入多种不同的字体,这也适用,我的结构如下: font-family: Verdana, sans-serif, language1, language2, language3 -- -> 虽然你必须限制前两个的 UTF 范围才能做到这一点。
      【解决方案3】:

      您可以通过在应用首次启动时将字体文件从您的资产复制到您的文件夹中来使其适用于所有版本,然后将其引用为:

      "@font-face {
       font-family: cool_font;
       src: url('file://"+ getFilesDir().getAbsolutePath() 
        + "/cool_font.ttf');
      }"
      

      【讨论】:

      • 复制到我的文件夹似乎仍然对我不起作用。 WebView 仍然不使用我的字体。你做了什么特别的事吗?
      • 不是真的,在第一次启动时,我检查文件是否已复制到文件夹,如果没有,我复制它,然后如前所述引用它。 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)) &gt; 0) { myOutput.write(buffer, 0, length); } myOutput.flush(); myOutput.close(); myInput.close(); }
      • 我也没有成功地让它工作。果然,我的字体出现在我的应用程序的/data/data/[package]/files 目录中,虽然 WebView 根据 CSS 进行了风格化,但文本根本没有以所需的字体出现。我正在针对 Android 2.1 构建并在 2.3.5 上进行测试。有什么线索吗?
      【解决方案4】:

      正如 Felipe Martinez Carreño 所说,您可以从资产中复制,它会起作用。

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

      【讨论】:

        【解决方案5】:

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

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

        【讨论】:

          【解决方案6】:

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

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

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

          我很高兴在资产中简单地包含 HTML 内容和字体文件,并从那里加载。

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

          【讨论】:

            【解决方案7】:

            loadData 也不适合我,所以我在 src 路径中使用了file:///android_asset

            它适用于loadDataWithBaseURL

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

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

            然后使用 assets 路径作为基本 url:

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

            【讨论】:

            • 我在将 css 放入 strings.xml 时遇到问题。所以我用上面的css值创建了一个字符串常量,它能够显示自定义字体效果..谢谢!
            • 你让我很开心!! :)
            • 只要确保字体路径正确且不以“/”开头(例如'/fonts/feasfbrg.ttf')
            • 你刚刚成就了我的一天!!谢谢!我缺少基本 URL。
            【解决方案8】:
            @font-face {
             font-family: 'MyCustomFont';
             src: url('/assets/fonts/MaycustomFont.ttf') 
            }
            

            它对我有用。

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

            【讨论】:

              【解决方案9】:

              我在下面的代码中使用了波斯字体的 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);
              

              【讨论】:

                【解决方案10】:

                这在我测试过的所有设备上都非常适合我。

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

                【讨论】:

                  猜你喜欢
                  • 2012-08-23
                  • 1970-01-01
                  • 2017-08-14
                  • 1970-01-01
                  • 2021-02-18
                  • 2020-07-11
                  • 1970-01-01
                  • 1970-01-01
                  相关资源
                  最近更新 更多