Cómo usar una fuente personalizada con WebView

Ahora quiero mostrar algunos caracteres Unicode y he usado la etiqueta: something here . Pero parece que WebView no puede encontrar la fuente Arial porque solo puedo ver los caracteres UFO. ¿Debo copiar arial.ttf a alguna parte o cómo puedo usar esta fuente TrueType con WebView ? Gracias.

loadData tampoco me funcionó, así que utilicé file:///android_asset en la ruta src.

¡Funcionó con loadDataWithBaseURL !

Para este ejemplo, cambié el CSS a:

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

A continuación, use la ruta de los activos como URL base:

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

Aparentemente, puede usar una fuente personalizada para WebView , como se sugirió en @raychung. Pero esto no funcionará para 2.1 (el error se informa aquí ). Esto debería funcionar para 1.5, 1.6 y 2.2.

Puede poner su archivo TTF de fuente personalizado en su carpeta /assets , luego, en su archivo CSS, puede colocarlo en:

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

Ahora puede hacer referencia a este estilo de fuente en su archivo HTML.

Puede hacer que funcione en todas las versiones copiando el archivo de fuente de sus activos a su carpeta de archivos en el primer lanzamiento de la aplicación, y luego haga referencia a ella como:

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

Esto funciona para mi.

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

Utilicé el código siguiente para la dirección rtl con fuente persa, espero que alguien use este código o alguien me sugiera la mejor manera. Gracias

  String myCustomStyleString=""; webView.loadDataWithBaseURL("", myCustomStyleString+"
"+myHtm+"
", "text/html", "utf-8", null);

No funcionó para mí, tuve que vincular la fuente en mi servidor web en lugar de usar la referencia a un archivo local:

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

Como dijo Felipe Martínez Carreño, puedes copiar de los activos y funcionará.

Puede referir esto para más detalles

La idea básica es que la página web debería tener acceso al archivo de fuente. Esta es la razón por la que la solución original sugerida funciona cuando el archivo HTML y el archivo de fuente están en la carpeta de activos, y el archivo HTML se carga desde allí.

No es una función de Android, es CSS, por lo que debería funcionar con cualquier SDK de Android.

Cargar la fuente desde la carpeta de archivos debería funcionar también, si el archivo de fuente está realmente allí y la ruta de acceso correcta está dada en el estilo. Pero aunque el enfoque es más complicado, uno necesita escribir código para copiar el archivo, luego codificar para descubrir la ubicación del archivo.

Estoy muy contento de tener simplemente el contenido HTML y el archivo de fuente en los activos, y cargarlos desde allí.

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

Esto funciona muy bien para mí en todos los dispositivos en los que lo he probado.

Coloque sus archivos de fonts en / src / main / assets / fonts, luego use este método:

 public class HTMLUtils { public static String getLocalFontInHTML(String html, String fontFamily, String fontFileName) { return "\n" + "\n" + "\n" + "" + "\n" + "\n" + html + "\n" + "\n" + ""; } } 

como sigue

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

dónde

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

Espero que ayude a alguien!

Si desea mantener el tamaño de fuente de su código html eliminar

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

Ten en cuenta que 1rem es equivalente a alrededor de 14sp

usar css

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