Cómo cambiar la cara de la fuente de Webview en Android?
Quiero cambiar la fuente predeterminada de webview a una fuente personalizada. Estoy usando webview para desarrollar una aplicación de navegador bilingüe para Android.
Intenté conseguir una instancia del tipo de letra de encargo colocando mi fuente de encargo en activos. Pero todavía no podía establecer la fuente predeterminada de webview a mi fuente.
- Solicitud de publicación de Android WebView con encabezados personalizados
- BasicAuthentication en android para que la vista web no funcione
- Soporte de SVG en Android
- Android WebView: acceso a clases desde un iframe dentro de otro iframe
- Cómo reproducir video en Android Web view usando html5
Esto es lo que intenté:
Typeface font = Typeface.createFromAsset(getAssets(), "myfont.ttf"); private WebView webview; WebSettings webSettings = webView.getSettings(); webSettings.setFixedFontFamily(font);
¿Puede alguien corregir esto o sugerir cualquier otro método para cambiar la fuente predeterminada de webview a una fuente personalizada?
¡Gracias!
- No se puede eliminar la imagen en div contenteditable en Android
- Proguard mess Javascript Funciones de interfaz al orientar SDK en Android Manifiesto por encima de 17
- Obtener valor href de la etiqueta de anclaje en Android WebView cuando se hace clic en el enlace
- Cómo habilitar WebKitDeveloperExtras en WebView de Android
- Cómo enviar parámetros a un archivo local en un WebView en android?
- Android- PhoneGap / WebView ignora las metaetiquetas de la ventana de visualización?
- La página de vista web de Android no carga correctamente la página
- Ocultar / Mostrar la barra de herramientas cuando se desplaza el fragmento en las pestañas
Hay un ejemplo práctico de esto en este proyecto . Se reduce a:
- En la carpeta
assets/fonts
, coloque la fuente OTF o TTF deseada (aquí MyFont.otf) -
Cree un archivo HTML que utilice 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 el WebView desde el código:
webview.loadUrl("file:///android_asset/demo/my_page.html");
Tenga en cuenta que la inyección de HTML a través de loadData()
no está permitido. Según la documentación :
Tenga en cuenta que la misma política de origen de JavaScript significa que el script que se ejecuta en una página cargada utilizando este método no podrá acceder al contenido cargado utilizando ningún esquema distinto de "datos", incluido "http (s)". Para evitar esta restricción, use loadDataWithBaseURL () con una URL de base apropiada.
Como @JaakL sugiere en el comentario a continuación, para cargar HTML desde una cadena, debería proporcionar la URL base que apunta a sus recursos:
webView.loadDataWithBaseURL("file:///android_asset/", htmlData);
Al hacer referencia a la fuente en htmlData
, puede utilizar simplemente /fonts/MyFont.otf
(omitiendo la URL de base).
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);
Incluso más simple, puede utilizar el formato URL de activo para hacer referencia a la fuente. No necesita programación!
@font-face { font-family: 'myface'; src: url('file:///android_asset/fonts/myfont.ttf'); } body { font-family: 'myface', serif;
…
Se puede hacer en Android. Tomé tres días para resolver este problema. Pero ahora parece muy fácil. Siga estos pasos para configurar la fuente personalizada para Webview
1.Agregar su fuente a la carpeta de activos
2.Copiar 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.You tiene que llamar por encima de la función sólo una vez (hay que encontrar alguna lógica para esto).
copyFile(getContext(), "myfont.ttf");
4.Use el siguiente código para establecer el valor de su webview. 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 anterior como a continuación
webview.loadDataWithBaseURL(null, getHtmlData(activity,htmlData) , "text/html", "utf-8", "about:blank");
Muchas de las respuestas anteriores trabajan mentira un encanto si usted tiene su contenido en su carpeta de activos.
Sin embargo, si te gusta que quieras descargar y guardar todos tus activos desde un servidor a tu almacenamiento interno, puedes usar loadDataWithBaseURL
y usar una referencia a tu almacenamiento interno como baseUrl. Entonces todos los archivos allí serán relativos al html cargado y se encuentran y se utilizan correctamente.
En mi almacenamiento interno he guardado los archivos siguientes:
- IndigoAntiqua2Text-Regular.ttf
- Style.css
- Image.png
Entonces utilizo el código siguiente:
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 anterior (style.css):
@font-face { font-family: 'MyCustomRunning'; src: url('IndigoAntiqua2Text-Regular.ttf') format('truetype'); } .running{ color: #565656; font-family: "MyCustomRunning"; font-size: 48px; }
Sólo he intentado esto mientras que la orientación de minSdkVersion 19 (4.4) por lo que no tengo idea de si funciona en otras versiones
He hecho esto por las respuestas superiores con estas adiciones:
webView.loadDataWithBaseURL("file:///android_asset/", WebClient.getStyledFont(someText), "text/html; charset=UTF-8", null, "about:blank");
Y luego usar 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:)
Puede hacerlo utilizando CSS. Lo hice con una aplicación, pero no funcionará en Android 2.1, ya que hay un error conocido con el navegador Android 2.1.
El problema es que tiene que estar en una carpeta, intente poner "./myfont.ttf" en su lugar, si no poner la fuente dentro de una carpeta en los activos como "fuentes / myfont.ttf" que funcionará con seguridad.
¿Cómo u obtener htmlData en esta línea.
Webview.loadDataWithBaseURL (null, getHtmlData (actividad, htmlData ), "text / html", "utf-8", "about: blank");
- ¿Cómo presionar el botón de nuevo en android programáticamente?
- EOFException al leer la cinta QueueFile