ttf - Fuentes personalizadas en Android PhoneGap
que fuente usa android (8)
Intenté crear fuentes personalizadas para mi aplicación. Para eso, escribí este código en mi archivo html:
<style type="text/css" media="screen">
@font-face {
font-family: centurySchoolbook;
src: url(/fonts/arial.ttf);
}
body {
font-family: centurySchoolbook;
font-size:30px;
}
</style>
En mi cuerpo Html:
<body onload="init();">
<h>Custom Fonts</h>
<div>This is for sample</div>
</body>
Pero estos estilos no se aplican a mi cuerpo html. ¿Alguna ayuda para resolver esto?
A continuación funciona como charm para fuente personalizada con jQueryMobile y Phonegap:
@font-face {
font-family: "Lato-Reg";
src: url("../resources/Fonts/Lato-Reg.ttf") format("opentype");
/* Make sure you defined the correct path, which is related to
the location of your file `my_css.css` */
}
body *{
margin: 0;
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-user-select: none; /* prevent copy paste, to allow, change ''none'' to ''text'' */
font-family: "Lato-Lig" !important;
font-weight: normal !important;
}
Acabo de copiar mis ttf-fonts en el directorio [app-name] / css y he declarado las familias de fuentes en el index.css. Ver imagen adjunta: mi index.css editado (Verifique las áreas marcadas en verde en la imagen adjunta). También cambié el estilo "background-attachment: fixed"; "Helvetica, Arial, no-serif ..." a "Open Sans, Open Sans Condensed, no-serif", - también eliminé la línea "text-transform: mayúscula". Después de eso todo funcionó bien con mi fuente "Open Sans". Por supuesto, también incluí mi propia hoja de estilo con declaraciones de los otros estilos y familias de fuentes de mi proyecto.
También estoy usando jQuery y jQueryMobile en ese proyecto. Usan la misma fuente (Open Sans), ¡pero agregué fuentes adicionales que también funcionan!
Feliz codificación!
Estaba enfrentando un problema similar. El problema estaba en la ruta que tomaba cuando la fuente se entregaba a través de un archivo css externo. Para resolver esto, declare la URL de fuente en línea en el cuerpo de index.html
<div>
<style scoped>
@font-face {
font-family: Monotype Corsiva;
src: url(''fonts/Monotype_Corsiva.ttf'') format(''truetype'');
}
</style>
</div>
Funcionó después de declarar la URL de la fuente de esta manera.
Lo hice funcionar después de hacer los siguientes pasos:
-Ponga su CSS en un archivo, por ejemplo my_css.css :
@font-face {
font-family: "customfont";
src: url("./fonts/arial.ttf") format("opentype");
/* Make sure you defined the correct path, which is related to
the location of your file `my_css.css` */
}
body {
font-family: "customfont";
font-size:30px;
}
-Referencia de su archivo CSS my_css.css en su HTML:
<link rel="stylesheet" href="./path_to_your_css/my_css.css" />
¡Presta atención a la definición de tus caminos!
Por ejemplo, supongamos que tiene la siguiente estructura de directorio:
www
your_html.htmlcss
-
my_css.css
-
fuentes
-
arial.ttf
-
Entonces, tendrías:
@font-face {
font-family: "customfont";
src: url("../fonts/arial.ttf") format("opentype");
/* Make sure you defined the correct path, which is related to
the location of your file `my_css.css` */
}
body {
font-family: "customfont";
font-size:30px;
}
y:
<link rel="stylesheet" href="./css/my_css.css" />
Nota: si usa jQuery Mobile, la solución puede no funcionar (jQuery Mobile "interferirá" con el css ...).
Por lo tanto, puede intentar imponer su estilo utilizando el atributo de estilo.
P.ej:
<body>
<h>Custom Fonts</h>
<div style="font-family: ''customfont'';">This is for sample</div>
</body>
Una desventaja es que parece que el style no se puede aplicar en el body ...
Por lo tanto, si desea aplicar la fuente a toda la página, puede intentar algo como esto:
<body>
<!-- ADD ADDITIONAL DIV WHICH WILL IMPOSE STYLE -->
<div style="font-family: ''customfont'';">
<h>Custom Fonts</h>
<div >This is for sample</div>
</div>
</body>
Espero que esto funcione para ti también. Déjame saber acerca de tus resultados.
Los posibles problemas se encuentran en default.css en cordova. Compruebe si el elemento del cuerpo tiene un estilo definido para " texto-transformar: mayúscula ".
Al menos ese fue el problema para mí, después de eliminar este elemento del cuerpo en index.css predeterminado si está utilizando en su aplicación, puede ayudarlo también.
Para mí estaba usando gurmukhi / punjabi fonts, y después de la eliminación de la línea de index.css, solo funcionaba como charm con las definiciones de css below only
Ejemplo:
.demo {
font-family: anmol
}
@font-face {
font-family: anmol;
src: url(../fonts/anmol.ttf);
}
También me enfrenté al mismo problema. Puse mi archivo css en la carpeta css . Puse el archivo ttf en la carpeta www y no funcionó correctamente, así que moví mi archivo ttf a la carpeta css . Aquí está mi código:
@font-face
{
font-family: CustomArial;
src: url(''arial.ttf'');
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
font-family: CustomArial;
}
Si está utilizando jquery mobile, debe sobrescribir la fuente como:
.ui-bar-a, .ui-bar-a input, .ui-bar-a select, .ui-bar-a textarea, .ui-bar-a button {
font-family: CustomArial !important;
}
Tienes que anular la familia de fuentes en tu CSS para cualquier clase móvil de jquery que tenga una familia de fuentes: Helvetica, Arial, sans-serif; a
font-family:CustomArial !important;
Ahora funcionará. Puede intentarlo así, puede ser útil para usted.
aquí puede encontrar las fuentes .ttf the google: https://github.com/w0ng/googlefontdirectory
en su archivo .css
@font-face {
font-family: ''Open Sans'';
src: url(''../font/OpenSans-Regular.ttf'') format(''truetype'');
font-weight: 400;
}
<style type="text/css" media="screen">
@font-face {
font-family: ''centurySchoolbook'';
src: url(''fonts/arial.ttf'');
}
body {
font-family: centurySchoolbook;
font-size:30px;
}
</style>
con comillas en la familia de fuentes y en la url funcionó para mí, dentro del archivo html y en Android.
Funciona en dispositivos físicos, pero no en emuladores.