Android 如何在 WebView 中使用自定义字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1344080/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use custom font with WebView
提问by App8ite
Now I want to display some unicode characters and I have used tag: <font face="
Arial">something here</font>. But it seems that WebViewcan not find the Arial
font because I can only see UFO-characters. Do I have to copy arial.ttf to
somewhere or how can I use this TrueType font with WebView? Thanks.
现在我想显示一些 unicode 字符并且我使用了 tag: <font face="
Arial">something here</font>。但似乎WebView找不到 Arial 字体，因为我只能看到 UFO 字符。我是否必须将 arial.ttf 复制到某个地方，或者如何使用这种 TrueType 字体WebView？谢谢。
回答by App8ite
loadDatadidn't work for me either, so I used file:///android_assetin the src path.
loadData也不适合我，所以我file:///android_asset在 src 路径中使用。
It worked with loadDataWithBaseURL!
它与loadDataWithBaseURL！
For this example I changed the CSS to:
在这个例子中，我将 CSS 更改为：
@font-face {
font-family: 'feast';
src: url('fonts/feasfbrg.ttf');
}
body {font-family: 'feast';}
Then use the assets path as the base url:
然后使用资产路径作为基本 url：
loadDataWithBaseURL("file:///android_asset/",myhtml,"text/html","utf-8",null);
回答by Zarah
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.
显然，您可以为 使用自定义字体WebView，如上面的@raychung 建议的那样。但这不适用于 2.1（此处报告了错误）。这应该适用于 1.5、1.6 和 2.2。
You can put your custom font TTF file in your /assetsfolder, then in your CSS file you can put in:
您可以将自定义字体 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;
}
You can now reference this font style in your HTML file.
您现在可以在 HTML 文件中引用此字体样式。
回答by Felipe Martinez Carre?o
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');
}"
回答by Benna
@font-face {
font-family: 'MyCustomFont';
src: url('/assets/fonts/MaycustomFont.ttf')
}
It works for me.
这个对我有用。
->src
->assets
->fonts
->MaycustomFont.ttf
->..
->res
回答by Mohsen Abdollahi
I used below code for rtl direction with persian font, hope someone used this code or someone suggest me best way. thanks
我使用下面的代码用于带有波斯字体的 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);
回答by TibiG
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:
将您的字体文件放在 /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>";
}
}
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
如果您想保留 html 代码中的字体大小，请删除
"* {font-size: 1rem !important;}"
Have in mind that 1rem is equivalent to about 14sp
请记住，1rem 相当于大约 14sp
回答by David R.
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';}
回答by Alex
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.
基本思想是网页应该可以访问字体文件。这就是为什么当 HTML 文件和字体文件都在资产文件夹中并且从那里加载 HTML 文件时，建议的原始解决方案起作用的原因。
It isn't an Android feature, it's CSS, so should work with any Android SDK.
它不是 Android 功能，而是 CSS，因此应该适用于任何 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.
我很高兴在资产中简单地包含 HTML 内容和字体文件，并从那里加载。
webView.loadUrl("file:///android_asset/content.html");
回答by binary
回答by raychung
use css
使用 CSS
@font-face {
font-family: cool_font;
src: url('cool_font.ttf');
}
