web-dev-qa-db-fra.com

Polices personnalisées dans Android PhoneGap

J'ai essayé de créer des polices personnalisées pour mon application. Pour cela, j'ai écrit ce code dans mon fichier 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>

Dans mon corps html: 

<body onload="init();">
<h>Custom Fonts</h>
    <div>This is for sample</div>

</body>

Mais, ces styles ne sont pas appliqués à mon corps html .. Toute aide pour résoudre ce problème .. ??

androidcordovacustom-font
21
user1357696

Je l'ai fait fonctionner après avoir suivi les étapes suivantes:

-Mettez votre CSS dans un fichier, par exemple 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;
    }

-Reférez votre fichier CSS my_css.css dans votre code HTML:

<link rel="stylesheet" href="./path_to_your_css/my_css.css" />

Faites attention à la définition de vos chemins!

Par exemple, supposons que vous ayez la structure de répertoire suivante:

  • www

    • your_html.html

    • css

      • my_css.css

    • polices

      • arial.ttf

Ensuite, vous auriez:

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

et:

<link rel="stylesheet" href="./css/my_css.css" />

Remarque: si vous utilisez jQuery Mobile, la solution risque de ne pas fonctionner (jQuery Mobile "interférera" avec le css ...). 

Donc, vous pouvez essayer d’imposer votre style en utilisant l’attribut style.

Par exemple:

<body>
    <h>Custom Fonts</h>
    <div style="font-family: 'customfont';">This is for sample</div>
</body>

Un inconvénient est qu’il semble que la style ne puisse pas être appliquée le body...

Donc, si vous voulez appliquer la police à la page entière, vous pouvez essayer quelque chose comme ceci:

<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>

J'espère que cela fonctionnera pour vous aussi. Faites-moi savoir sur vos résultats.

32
Littm

J'ai aussi fait face au même problème. Je mets mon fichier css dans le dossier css. J'ai mis le fichier ttf dans le dossier www et cela n'a pas fonctionné correctement. J'ai donc déplacé mon fichier ttf dans le dossier css. Voici mon code:

@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 vous utilisez jquery mobile, vous devez remplacer la police comme suit:

.ui-bar-a, .ui-bar-a input, .ui-bar-a select, .ui-bar-a textarea, .ui-bar-a button {
    font-family: CustomArial !important;
}

Vous devez remplacer la famille de polices dans votre css quelle que soit la classe de classe jquery mobile ayant cette famille de polices: Helvetica, Arial, sans-serif; à

font-family:CustomArial !important;

Maintenant ça va marcher. Vous pouvez essayer comme ça, peut être utile pour vous.

2
user

Ci-dessous fonctionne comme un charme pour une police personnalisée avec jQueryMobile et 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;

 }
2
amol-c

vous pouvez trouver ici les polices .ttf et google: https://github.com/w0ng/googlefontdirectory

this screenshot should help

dans votre fichier .css 

@font-face {
 font-family: 'Open Sans';
 src: url('../font/OpenSans-Regular.ttf') format('truetype');
 font-weight: 400;
}
1
dam1
<style type="text/css" media="screen">
    @font-face {
        font-family: 'centurySchoolbook';
        src: url('fonts/arial.ttf');
    }
   body {
       font-family: centurySchoolbook;
       font-size:30px;
   }
</style>

avec des citations sur la famille de polices et sur l'URL a fonctionné pour moi, à l'intérieur du fichier HTML et sur Android.

Cela fonctionne sur les périphériques physiques, mais pas sur l'émulateur.

0
Vinte Segundos

Je viens de copier mes polices ttf dans le répertoire [app-name]/css et à déclarer les familles de polices dans le fichier index.css. Voir l'image jointe: mon index.css édité (vérifiez les zones indiquées en vert dans l'image jointe). Là j'ai aussi changé le style "background-attachment: fixed;" "Helvetica, Arial, no-serif…" à "Open Sans, Open Sans Condensed, no-Serif", - J'ai également supprimé la ligne "text-transform: majuscule". Après cela, tout a fonctionné correctement avec ma police "Open Sans" . Bien sûr, j'ai également inclus ma propre feuille de style avec les déclarations des autres styles et familles de polices de mon projet.

J'utilise également jQuery et jQueryMobile dans ce projet. Ils utilisent la même police (Open Sans), mais j'ai ajouté des polices supplémentaires qui fonctionnent également!

Bonne codage!

0
Utz

Les problèmes possibles sont index.css par défaut dans cordova. Vérifiez si le style de l'élément body est défini pour "text-transform: majuscule".

Au moins, c’est là le problème qui m’a été causée, après avoir supprimé cet élément de body dans index.css par défaut si vous utilisez votre application, peut également vous aider.

Pour moi, j'utilisais les polices gurmukhi/punjabi, et après la suppression de la ligne ci-dessus dans index.css, cela fonctionnait comme un charme avec les définitions ci-dessous css

Exemple :

.demo {
   font-family: anmol
}
@font-face {
   font-family: anmol;
   src: url(../fonts/anmol.ttf);
}
0
Ajeet Singh

Je faisais face à un problème similaire. Le problème concernait le chemin qu'il prenait lorsque la police a été fournie via un fichier css externe . Pour résoudre ce problème, j'ai déclaré l'URL de la police inline dans le corps de index.html.

<div>
      <style scoped>
        @font-face {
          font-family: Monotype Corsiva;
          src: url('fonts/Monotype_Corsiva.ttf') format('truetype');
        }
      </style>
</div>

Cela a fonctionné après avoir déclaré l'URL de police de cette manière.

0
Shefali Agarwal