如何在 WebView 中使用自定义字体

发布于 2024-08-03 08:30:49 字数 201 浏览 6 评论 0原文

现在我想显示一些unicode字符并且我使用了标签： 这里有东西。但是WebView似乎找不到Arial 字体，因为我只能看到 UFO 字符。我是否必须将 arial.ttf 复制到某处或者如何在 WebView 中使用此 TrueType 字体？谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

り繁华旳梦境 2024-08-10 08:30:49

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

它与 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);

loadData didn't work for me either, so I used file:///android_asset in the src path.

It worked with loadDataWithBaseURL!

For this example I changed the CSS to:

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

body {font-family: 'feast';}

Then use the assets path as the base url:

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

回复收藏 0 原文

美人迟暮 2024-08-10 08:30:49

显然，您可以为 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 文件中引用此字体样式。

Apparently, you can use a custom font for WebView, as @raychung above suggested. But this won't work for 2.1 (Bug is reported here). This should work for 1.5, 1.6 and 2.2.

You can put your custom font TTF file in your /assets folder, then in your CSS file you can put in:

@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;
}

You can now reference this font style in your HTML file.

回复收藏 0 原文

深居我梦 2024-08-10 08:30:49

您可以在首次启动应用程序时将字体文件从资产复制到文件夹中，然后将其引用为：

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

You can get it to work on all versions by copying the font file from your assets to your files folder on the first launch of the app, and then reference it as:

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

回复收藏 0 原文

汐鸠 2024-08-10 08:30:49

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

这对我有用。

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

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

It works for me.

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

回复收藏 0 原文

冷心人i 2024-08-10 08:30:49

我使用下面的代码用于带有波斯字体的 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);

I used below code for rtl direction with persian font, hope someone used this code or someone suggest me best way. thanks

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

回复收藏 0 原文

秋心╮凉 2024-08-10 08:30:49

它对我不起作用，我必须链接网络服务器上的字体，而不是使用对本地文件的引用：

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

body {font-family: 'feast';}

It didn't worked for me, I have had to link the font on my web server instead of using the reference to a local file:

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

body {font-family: 'feast';}

回复收藏 0 原文

故事↓在人 2024-08-10 08:30:49

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

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

This works great for me on all the devices I've tested it on.

Place your font files in /src/main/assets/fonts, then use this method:

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>";
     }
}

as follows

webView.loadDataWithBaseURL("file:///android_asset/", HTMLUtils.getLocalFontInHTML(item.text, Config.FONT_FAMILY, Config.REGULAR_FONT),"text/html", "UTF-8", null);

where

public static final String FONT_FAMILY = "Montserrat";

public static final String REGULAR_FONT = "fonts/Montserrat-Regular.otf";

Hope it helps someone!

If you want to keep the font size from your html code remove

 "* {font-size: 1rem !important;}"

Have in mind that 1rem is equivalent to about 14sp

回复收藏 0 原文

无人问我粥可暖 2024-08-10 08:30:49

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

您可以参考此了解更多信息细节

回复收藏 0 原文

风追烟花雨 2024-08-10 08:30:49

基本思想是网页应该能够访问字体文件。这就是为什么当 HTML 文件和字体文件都位于 asset 文件夹中并且 HTML 文件从那里加载时，建议的原始解决方案起作用。

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

如果字体文件确实存在并且样式中给出了正确的路径，则从文件文件夹加载字体也应该有效。但这种方法比较混乱，需要编写代码来复制文件，然后编写代码来找出文件的位置。

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

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

The basic idea is that the web page should have access to the font file. This is why the suggested original solution works when both the HTML file and the font file are in the assets folder, and the HTML file is loaded from there.

It isn't an Android feature, it's CSS, so should work with any Android SDK.

Loading the font from the files folder should work as well, if the font file is really there and the correct path to it is given in the style. But tho approach is messier, one needs to write code to copy the file, then code to figure out the location of the file.

I am quite happy to simply have the HTML content and the font file in the assets, and loading from there.

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

回复收藏 0 原文

怪我闹别瞎闹 2024-08-10 08:30:49

使用CSS

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

use css

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

回复收藏 0 原文

~没有更多了~

关于作者

审判长

暂无简介

0 文章

0 评论

21 人气

关注发私信

友情链接

文江博客

如何在 WebView 中使用自定义字体

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（10）

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

如何在 WebView 中使用自定义字体

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（10）

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。