2009-08-27 31 views
56

Ahora quiero mostrar algunos caracteres Unicode y he usado la etiqueta: <font face=" Arial">something here</font>. Pero parece que WebView no puede encontrar la fuente Arial porque solo puedo ver los caracteres UFO. ¿Tengo que copiar arial.ttf a en algún lugar o cómo puedo usar esta fuente TrueType con WebView? Gracias.Cómo utilizar una fuente personalizada con WebView

Respuesta

0

uso css

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

Al parecer, se puede utilizar una fuente personalizada para WebView, como @raychung anteriormente sugeridos. Pero esto no funcionará para 2.1 (se informa el error here). Esto debería funcionar para 1.5, 1.6 y 2.2.

Se puede poner el archivo TTF fuente personalizada en la carpeta de /assets, a continuación, en el archivo CSS que puede poner 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 el archivo HTML.

+2

Si pongo el '' .ttf' y .html' archivo en el mismo directorio y cárguelo en el navegador de Android, funciona. Sin embargo, en el WebView de mi aplicación, mientras se muestra el CSS, el texto aparece en la fuente predeterminada de Android a pesar de agregar '.ttf' a la carpeta' assets' del proyecto. Estoy probando en 2.3.5, pero construyendo contra 2.1. ¿Podría ser ese el problema, o hay algo que me falta? –

+1

Encontré una resolución: si crea un archivo HTML y lo coloca en los activos, lo carga mediante 'view.loadUrl()' funciona, mientras que 'view.loadData()' no lo hace. No tengo idea de por qué este último no. –

+0

Hola @Paul! Eso es curioso No he intentado trabajar en este error desde hace un tiempo, pero cuando lo necesite probaré su solución. Lo que hice antes fue cambiar los caracteres especiales a imágenes en los archivos HTML. – Zarah

3

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

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

Copiar a mi carpeta de archivos todavía no parece funcionar para mí. El WebView todavía no usa mi fuente. ¿Hay algo especial que hayas hecho? – Zarah

+0

En realidad, en el primer lanzamiento compruebo si el archivo se ha copiado a la carpeta de archivos, si no, lo copio y luego lo menciono como se dijo anteriormente. 'Archivo f = new File (getFilesDir()," coolFont.ttf "); if (f.length() == 0) { InputStream myInput = this.getAssets(). Open ("fuentes/coolFont.ttf"); String outFileName = "coolFont.ttf "; OutputStream myOutput = new FileOutputStream (getFilesDir() +"/"+ outFileName); byte [] buffer = nuevo byte [1024]; int longitud; while ((length = myInput.read (buffer)) > 0) { myOutput.write (buffer, 0, longitud); } myOutput.flush(); myOutput.close(); myInput.close();} ' –

+0

no he tenido éxito en esto también funciona. Sin duda, mi fuente aparece en el directorio '/ data/data/[package]/files' de mi aplicación, y mientras WebView está estilizado según el CSS, el texto simplemente no aparece en el fuente deseada. Estoy compilando contra Android 2.1 y probando en 2.3.5. ¿Alguna pista qué da? –

1

Como Felipe Martínez Carreño Dijo que puede copiar de los activos y que funcionará.

Se puede hacer referencia this para más detalles

2

No trabajó para mí, he tenido que unir el tipo de letra en mi servidor web en lugar de utilizar la referencia a un archivo local:

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

body {font-family: 'feast';} 
+0

Intenté esto pero n ot help me –

1

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 característica 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"); 
74

loadData no funcionó para mí tampoco, por lo que utiliza file:///android_asset en el camino src.

Funcionó con loadDataWithBaseURL!

Para este ejemplo he cambiado el CSS para:

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

body {font-family: 'feast';} 

A continuación, utilice la ruta de los activos que la URL base:

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

Tuve problema para poner el CSS en 'strings.xml'. Así que creé una constante de cadena con el valor de css anterior y pude mostrar el efecto de fuente personalizado ... ¡Gracias! –

+0

¡Acabas de hacer mi día! :) – gauravsapiens

+1

no funciona para mí –

3
@font-face { 
font-family: 'MyCustomFont'; 
src: url('/assets/fonts/MaycustomFont.ttf') 
} 

Funciona para mí.

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

Solía ​​continuación Código de dirección RTL con la fuente persa, espero que alguien utiliza este código o alguien me sugieren mejor manera. gracias

  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); 
0

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

Coloque los ficheros en/src/main/activos/tipos de letra, a continuación, utilizar este método:

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

de la siguiente manera

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

donde

public static final String FONT_FAMILY = "Montserrat"; 

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

creo que sirve ¡alguien!

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

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

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

Cuestiones relacionadas