如何在 WebView 中使用自定义字体
Posted
技术标签:
【中文标题】如何在 WebView 中使用自定义字体【英文标题】：How to use custom font with WebView 【发布时间】：2010-11-23 13:33:36 【问题描述】：现在我想显示一些 unicode 字符，我使用了标签：<font face="
Arial">something here</font>。但是WebView好像找不到Arial
字体，因为我只能看到不明飞行物字符。我是否必须将 arial.ttf 复制到
在某处或如何将这种 TrueType 字体与WebView 一起使用？谢谢。
【问题讨论】：
【参考方案1】：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。【参考方案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 文件中的图像。
如果有用，see my more elaborate answer & example.
仅供参考 - 如果您想为多种不同的语言输入多种不同的字体，这也适用，我的结构如下： 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)) > 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】：
@font-face
font-family: 'MyCustomFont';
src: url('/assets/fonts/MaycustomFont.ttf')
它对我有用。
->src
->assets
->fonts
->MaycustomFont.ttf
->..
->res
【讨论】：
【参考方案5】：我在下面的代码中使用了波斯字体的 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);
【讨论】：
【参考方案6】：它对我不起作用，我不得不在我的网络服务器上链接字体，而不是使用对本地文件的引用：
@font-face
font-family: 'feast';
src: url('http://yoursite.com/tutorial/css/feasfbrg.ttf');
body font-family: 'feast';
【讨论】：
【参考方案7】：这在我测试过的所有设备上都非常适合我。
将你的字体文件放在/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
【讨论】：
【参考方案8】：正如 Felipe Martinez Carreño 所说，您可以从资产中复制，它会起作用。
您可以参考this了解更多详情
【讨论】：
【参考方案9】：基本思想是网页应该可以访问字体文件。这就是为什么当 HTML 文件和字体文件都在 assets 文件夹中并且 HTML 文件从那里加载时，建议的原始解决方案有效。
它不是 Android 功能，它是 CSS，因此应该适用于任何 Android SDK。
如果字体文件确实存在并且样式中给出了正确的路径，那么从文件夹加载字体也应该可以工作。但是这种方法比较麻烦，需要编写代码来复制文件，然后编写代码来找出文件的位置。
我很高兴在资产中简单地包含 HTML 内容和字体文件，并从那里加载。
webView.loadUrl("file:///android_asset/content.html");
【讨论】：
【参考方案10】：使用css
@font-face
字体家族：cool_font；
src: url('cool_font.ttf');
【讨论】：
以上是关于如何在 WebView 中使用自定义字体的主要内容，如果未能解决你的问题，请参考以下文章
如何在 iOS 的 WebView(react-native-webview) 中设置自定义字体？