Benutzerdefinierte Schriftarten in Android PhoneGap

Habe ich versucht, benutzerdefinierte Schriftarten für meine Anwendung. Für, die, ich schrieb diesen code in meiner html-Datei:

<style type="text/css" media="screen">
        @font-face {
            font-family: centurySchoolbook;
            src: url(/fonts/arial.ttf);
        }
       body {
           font-family: centurySchoolbook;
           font-size:30px;
       }
</style>

In meinem Html-Body:

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

</body>

Aber, diese Stile werden nicht angewendet, um meine html-Körper..
Jede Hilfe, um dieses Problem zu lösen..??

Du hast vergessen, die " um die URL. Funktioniert es, wenn Sie fügen Sie diese?
Welche url? phonegap.js?
Ich denke, Klaasvaak bedeutet, das Sie eingegeben haben src: url(/fonts/arial.ttf); (ohne die Anführungszeichen ") in Ihrem CSS-code. Sollte es nicht src: url("/fonts/arial.ttf"); ? Könnten Sie testen Sie Ihren code mit dieser änderung?
Ich habe versucht, wie das auch.. Aber o - /p / p war das gleiche..
In der Tat, können Sie versuchen, Ihren CSS-code in eine css-Datei und nicht in HTML. Ich weiß nicht warum, aber es scheint, dass die Inbetriebnahme der CSS direkt in HTML lässt es nicht zu funktionieren :S...

InformationsquelleAutor | 2012-09-17

32

Habe ich es zu arbeiten, nachdem Sie die folgenden Schritte ausführen:

-Setzen Sie Ihr CSS in eine Datei, zum Beispiel 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;
    }
```
-Referenz der CSS-Datei my_css.css im HTML:

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

Achten Sie auf die definition der Pfade!

Zum Beispiel, sagen wir, Sie haben folgende Verzeichnisstruktur:
- www
  - your_html.html
  - css
    
    my_css.css
  - Schriften
    
    arial.ttf
Dann würden Sie haben:
```
@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;
    }
```
und:

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

Hinweis: wenn Sie die jQuery-Mobile, die Lösung funktioniert möglicherweise nicht (jQuery-Mobile "stören" mit der css...).

So, können Sie versuchen, zu verhängen Ihren Stil, indem Sie mit dem style-Attribut.

ZB:
```
<body>
    <h>Custom Fonts</h>
    <div style="font-family: 'customfont';">This is for sample</div>
</body>
```
Einzige Nachteil ist, dass es scheint, dass die style nicht applyied auf body...

So, wenn Sie anwenden möchten, um die schriftart für die ganze Seite, können Sie versuchen, so etwas wie dieses:
```
<body>

    
    <div style="font-family: 'customfont';">

        <h>Custom Fonts</h>
        <div >This is for sample</div>

    </div>

</body>
```
Hoffen, dass dies auch für Sie arbeiten. Lassen Sie mich wissen, über Ihre Ergebnisse.

Danke für deinen Beitrag, ich habe versucht das gleiche mit richtigen Weg..Aber noch keine änderung.
oh... 🙁 ... Bist du mit Android oder iOS? Auch Sie sind mit Bibliotheken wie jQuery, Mobile?
Android, und unten enthalten tags: <script type="text/javascript" charset="utf-8" src="js/phonegap-1.1.0.js"></script> <script src="js/jquery-1.6.4.js"></script> <script src="js/jquery.mobile-1.0rc1.min.js"></script> <script src="js/main.js"></script>
:O... oh ich sehe... ich bin mir nicht sicher, aber ich denke, dass jQuery Mobile ist "interferring"... geben Sie mir einige Sekunden...
Hey Kumpel, wollen Sie verwenden Sie die schriftart für einen bestimmten Teil der HTML, oder möchten Sie es überall benutzen auf Ihrer Seite?

InformationsquelleAutor Littm

Unten funktioniert wie Charme für benutzerdefinierte schriftart mit jQueryMobile und 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;

 }

Ich habe es ausprobiert, aber leider hat es nicht funktioniert. Wenn ich die Seite testen mit firefox oder chrome ist alles OK aber im emulator fehlschlägt. Haben Sie eine Idee?
Getestet habe ich es gegen die xcode auf IOS. Sind u versuchen es auf Android ?
ja, ich bin versucht, das bei android, gibt es eine Möglichkeit, das zu tun?
Ich habe nicht versucht, die Portierung zu android -, u-shld versuchen, diese Frage zu stellen.
Es ist für mich arbeiten in veiw web browser

InformationsquelleAutor amol-c

Ich auch vor dem gleichen problem. Ich legte meine css-Datei in die css Ordner. Ich legte die ttf-Datei in der nur die www Ordner und es ging nicht richtig, also zog ich meine ttf Datei in den css Ordner. Hier ist mein 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;
}

Wenn Sie mit jquery mobile, müssen Sie das überschreiben der Schrift:

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

Müssen Sie das überschreiben der font-Familie in der css für was auch immer jquery-mobile-Klasse font-family:Helvetica, Arial, sans-serif;

font-family:CustomArial !important;

Ist es jetzt funktionieren wird. Sie können versuchen, wie diese, kann nützlich sein für Sie.

InformationsquelleAutor user

hier Ihre finden die .ttf die google fonts : https://github.com/w0ng/googlefontdirectory

Benutzerdefinierte Schriftarten in Android PhoneGap

in Ihr .css-Datei

@font-face {
 font-family: 'Open Sans';
 src: url('../font/OpenSans-Regular.ttf') format('truetype');
 font-weight: 400;
}

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

mit Zitaten auf die font-family und der url, die für mich gearbeitet, innerhalb der html-Datei und auf Android.

Es funktioniert auf physischen Geräten, aber nicht auf emulator.

InformationsquelleAutor Vinte Segundos

0

Möglichen Probleme, die liegt im default-index.css in cordova. Überprüfen Sie, ob das body-element hat Stil definiert für "text-transform:uppercase".

Atleast das Problem war bei mir nach dem entfernen dieser aus body-element in default-index.css wenn Sie in Ihrer Anwendung, kann Ihnen helfen, wie gut.

Für mich, ich war mit gurmukhi/punjabi-fonts, und nach der obigen Zeile entfernen aus dem index.css-nur es klappte mit unter css definiitions nur

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

Ich Stand vor einem ähnlichen Problem. Das problem mit dem Pfad zu nehmen, war, wenn die Schrift gegeben wurde, durch eine externe css-Datei.
Um dies zu beheben, erklärte ich die schriftart inline-URL in den Körper index.html
```
<div>
      <style scoped>
        @font-face {
          font-family: Monotype Corsiva;
          src: url('fonts/Monotype_Corsiva.ttf') format('truetype');
        }
      </style>
</div>
```
Klappte es nach der Deklaration der schriftart URL in dieser Art und Weise.

InformationsquelleAutor Shefali Agarwal
0

Ich nur kopiert meine ttf-fonts in das Verzeichnis der [app-name]/css und deklariert die font-Familien im index.css gibt. Siehe die beigefügten Bild: meine bearbeiteten index.css (Überprüfen Sie die grün markierten Bereiche in der angehängten Bild). Dort habe ich auch geändert den Stil "background-attachment:fixed;" "Helvetica, Arial, no-serif..." zu "Open Sans, Open Sans Condensed, no-serif", – habe ich auch gelöscht, die Zeile "text-transform:uppercase". Nach, dass alles geklappt hat mit meiner schriftart "Open Sans".
Natürlich habe ich auch meine eigenen stylesheet mit Erklärungen anderer Stile und Schriftarten von meinem Projekt.

Ich bin auch mit jQuery und jQueryMobile in diesem Projekt. Sie verwenden die gleiche schriftart (Open Sans), aber ich habe zusätzliche fonts, die so gut funktionieren!

Happy coding!

Ist mein browser gehen Bananen oder du hast post die gleiche Antwort zu 3 mal?!?
Sorry, dass ich hier neu bin ... ich wollte nur etwas korrigieren, was in meinen Sätzen und dachte, es wäre ein update, aber es gepostet kopiert... SORRY 🙁
Verwenden edit Funktion.
Ich habe versucht zu "löschen" recent posts", aber das funktioniert nicht.
Endlich habe ich es geschafft! War wohl ein cache-problem, wie ich die zurück-Schaltfläche für die Bearbeitung meiner ersten Antwort. Konnte nicht gefunden edit-button überall vor – aber jetzt ist es hier.

InformationsquelleAutor Utz

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.