¿Cómo cambiar la apariencia de la fuente de Webview en Android?
font-face custom-font (10)
Aún más simple, puede usar el formato de URL de activo para hacer referencia a la fuente. ¡No se necesita programación!
@font-face {
font-family: ''myface'';
src: url(''file:///android_asset/fonts/myfont.ttf'');
}
body {
font-family: ''myface'', serif;
...
Quiero cambiar la fuente predeterminada de la vista web a una fuente personalizada. Estoy usando webview para desarrollar una aplicación de navegador bilingüe para Android.
Intenté obtener una instancia de tipo de letra personalizado colocando mi fuente personalizada en activos. Pero aún así no pude establecer la fuente predeterminada de webview para mi fuente.
Esto es lo que intenté:
Typeface font = Typeface.createFromAsset(getAssets(), "myfont.ttf");
private WebView webview;
WebSettings webSettings = webView.getSettings();
webSettings.setFixedFontFamily(font);
¿Alguien puede corregir esto o sugerir algún otro método para cambiar la fuente predeterminada de la vista web a una fuente personalizada?
¡Gracias!
Así es como carga htmlData en una vista web:
webview.loadDataWithBaseURL(null, getHtmlData(activity,**htmlData**) , "text/html", "utf-8", "about:blank");
donde getHtmlData(activity,**htmlData**) devuelve una cadena de código html.
El problema es que debe estar en una carpeta, intente poner "./myfont.ttf" en su lugar, si no ponga la fuente dentro de una carpeta en activos como "fonts / myfont.ttf" que funcionará con seguridad.
Hay un ejemplo de esto en este proyecto . Se reduce a:
- En la carpeta de
assets/fonts, coloque la fuente OTF o TTF deseada (aquí MyFont.otf) Cree un archivo HTML que usará para el contenido de WebView, dentro de la carpeta de
assets(aquí dentro deassets/demo/my_page.html):<html> <head> <style type="text/css"> @font-face { font-family: MyFont; src: url("file:///android_asset/fonts/MyFont.otf") } body { font-family: MyFont; font-size: medium; text-align: justify; } </style> </head> <body> Your text can go here! Your text can go here! Your text can go here! </body> </html>Cargue el HTML en la WebView desde el código:
webview.loadUrl("file:///android_asset/demo/my_page.html");
Tenga en cuenta que no está permitido inyectar el HTML a través de loadData() . Según la documentación :
Tenga en cuenta que la misma política de origen de JavaScript significa que la secuencia de comandos que se ejecuta en una página cargada con este método no podrá acceder al contenido cargado utilizando un esquema que no sea ''datos'', incluido ''http (s)''. Para evitar esta restricción, utilice loadDataWithBaseURL () con una URL base adecuada.
Como @JaakL sugiere en el comentario a continuación, para cargar HTML desde una cadena, en su lugar debe proporcionar la URL base que apunta a sus activos:
webView.loadDataWithBaseURL("file:///android_asset/", htmlData);
Al hacer referencia a la fuente en htmlData , puede simplemente usar /fonts/MyFont.otf (omitiendo la URL base).
Hice esto por respuestas superiores con estas adiciones:
webView.loadDataWithBaseURL("file:///android_asset/",
WebClient.getStyledFont(someText),
"text/html; charset=UTF-8", null, "about:blank");
y luego use src: url("file:///android_asset/fonts/YourFont...
public static String getStyledFont(String html) {
boolean addBodyStart = !html.toLowerCase().contains("<body>");
boolean addBodyEnd = !html.toLowerCase().contains("</body");
return "<style type=/"text/css/">@font-face {font-family: CustomFont;" +
"src: url(/"file:///android_asset/fonts/Brandon_reg.otf/")}" +
"body {font-family: CustomFont;font-size: medium;text-align: justify;}</style>" +
(addBodyStart ? "<body>" : "") + html + (addBodyEnd ? "</body>" : "");
}
Gracias a todos:)
Muchas de las respuestas anteriores funcionan y son un encanto si tiene su contenido en su carpeta de activos.
Sin embargo, si desea que yo quiera descargar y guardar todos sus activos desde un servidor a su almacenamiento interno, en su lugar puede usar loadDataWithBaseURL y usar una referencia a su almacenamiento interno como baseUrl. Luego, todos los archivos estarán relacionados con el html cargado y se encontrarán y usarán correctamente.
En mi almacenamiento interno, he guardado los siguientes archivos:
- IndigoAntiqua2Text-Regular.ttf
- style.css
- image.png
Luego uso el siguiente código:
WebView web = (WebView)findViewById(R.id.webby);
//For avoiding a weird error message
web.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
String webContent = "<!DOCTYPE html><html><head><meta charset=/"UTF-8/"><link rel=/"stylesheet/" href=/"style.css/"></head>"
+ "<body><img src=''image.png'' width=/"100px/"><div class=/"running/">I am a text rendered with INDIGO</div></body></html>";
String internalFilePath = "file://" + getFilesDir().getAbsolutePath() + "/";
web.loadDataWithBaseURL(internalFilePath, webContent, "text/html", "UTF-8", "");
El archivo CSS utilizado en el html (style.css) anterior:
@font-face {
font-family: ''MyCustomRunning'';
src: url(''IndigoAntiqua2Text-Regular.ttf'') format(''truetype'');
}
.running{
color: #565656;
font-family: "MyCustomRunning";
font-size: 48px;
}
Solo he intentado esto al apuntar a minSdkVersion 19 (4.4), así que no tengo idea de si funciona en otras versiones
Puedes hacerlo usando CSS. Lo hice con una aplicación, pero no funcionará en Android 2.1 ya que existe un error conocido con el navegador Android 2.1.
Se puede hacer en Android. Me tomó tres días resolver este problema. Pero ahora parece muy fácil. Siga estos pasos para configurar una fuente personalizada para Webview
1.Agrega tu fuente a la carpeta de activos
2. Copia la fuente al directorio de archivos de la aplicación
private boolean copyFile(Context context,String fileName) {
boolean status = false;
try {
FileOutputStream out = context.openFileOutput(fileName, Context.MODE_PRIVATE);
InputStream in = context.getAssets().open(fileName);
// Transfer bytes from the input file to the output file
byte[] buf = new byte[1024];
int len;
while ((len = in.read(buf)) > 0) {
out.write(buf, 0, len);
}
// Close the streams
out.close();
in.close();
status = true;
} catch (Exception e) {
System.out.println("Exception in copyFile:: "+e.getMessage());
status = false;
}
System.out.println("copyFile Status:: "+status);
return status;
}
3. Debe llamar a la función anterior solo una vez (debe encontrar alguna lógica para esto).
copyFile(getContext(), "myfont.ttf");
4.Utilice el siguiente código para establecer el valor de su vista web. Aquí estoy usando CSS para establecer la fuente.
private String getHtmlData(Context context, String data){
String head = "<head><style>@font-face {font-family: ''verdana'';src: url(''file://"+ context.getFilesDir().getAbsolutePath()+ "/verdana.ttf'');}body {font-family: ''verdana'';}</style></head>";
String htmlData= "<html>"+head+"<body>"+data+"</body></html>" ;
return htmlData;
}
5. Usted puede llamar a la función de arriba como se muestra a continuación
webview.loadDataWithBaseURL(null, getHtmlData(activity,htmlData) , "text/html", "utf-8", "about:blank");
Estoy usando este código :
wv = (WebView) findViewById(R.id.webView1);
String pish = "<html><head><style type=/"text/css/">@font-face {font-family: MyFont;src: url(/"file:///android_asset/font/BMitra.ttf/")}body {font-family: MyFont;font-size: medium;text-align: justify;}</style></head><body>";
String pas = "</body></html>";
String myHtmlString = pish + YourTxext + pas;
wv.loadDataWithBaseURL(null,myHtmlString, "text/html", "UTF-8", null);
webview= (WebView) findViewById(R.id.webview);
String myCustomStyleString="<style type=/"text/css/">@font-face {font-family: MyFont;src: url(/"file:///android_asset/fonts/iranian_sans.ttf/")}body,* {font-family: MyFont; font-size: 13px;text-align: justify;}img{max-width:100%;height:auto; border-radius: 8px;}</style>";
webview.loadDataWithBaseURL("", myCustomStyleString+"<div style=/"direction:rtl/">"+intentpost.getStringExtra("content")+"</div>", "text/html", "utf-8", null);