web-dev-qa-db-ja.com

Android PhoneGapのカスタムフォント

アプリケーション用にカスタムフォントを作成しようとしました。そのために、このコードを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>

私のHTML本文：

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

</body>

しかし、これらのスタイルは私のhtml本文には適用されません。

androidcordovacustom-font
21
user1357696

次の手順を実行した後、私はそれを動作させました：

-CSSをファイルに入れます。たとえば、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;
    }

-CSSファイルを参照my_css.css HTML内：

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

パスの定義に注意してください！

たとえば、次のディレクトリ構造があるとします。

  • www

    • your_html.html

    • css

      • my_css.css

    • フォント

      • arial.ttf

次に、あなたが持っているでしょう：

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

そして：

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

注： jQuery Mobileを使用する場合、ソリューションが機能しない可能性があります（jQuery Mobileはcssと「干渉」します...）。

したがって、style属性を使用してスタイルを強制することができます。

例えば：

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

1つの欠点は、styleをbodyに適用できないようです...

したがって、ページ全体にフォントを適用したい場合は、次のような方法を試してください。

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

これもあなたのために働くことを願っています。結果について教えてください。

32
Littm

私も同じ問題に直面しました。私のcssファイルをcssフォルダーに入れました。私はttfファイルをwwwフォルダーにのみ配置しましたが、正しく機能しなかったため、ttfファイルをcssフォルダーに移動しました。これが私のコードです：

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

Jquery mobileを使用している場合は、次のようにフォントを上書きする必要があります。

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

Font-family：Helvetica、Arial、sans-serifを持つjqueryモバイルクラスについては、cssのfont-familyをオーバーライドする必要があります。に

font-family:CustomArial !important;

今では動作します。あなたはこのように試すことができ、あなたにとってそれは便利かもしれません。

2
user

以下は、jQueryMobileと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

ここで、Googleフォントの.ttfを見つけることができます： https://github.com/w0ng/googlefontdirectory

this screenshot should help

.cssファイル

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

同様の問題に直面していました。問題は、外部のcssファイルを通じてフォントが指定されたときに使用していたパスにありました。これを解決するために、index.htmlの本文でフォントURLをインラインで宣言しました

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

この方法でフォントURLを宣言した後に機能しました。

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

font-familyとurlの引用符で、htmlファイル内とAndroidで機能しました。

物理デバイスでは機能しますが、エミュレータでは機能しません。

0
Vinte Segundos

私は自分のttf-fontsをディレクトリ[app-name]/cssにコピーし、そこのindex.cssでフォントファミリを宣言しました。添付画像を参照してください： 私の編集したindex.css （添付画像の緑色のマーク領域を確認してください）。そこで「background-attachment：fixed;」というスタイルも変更しました。 「Helvetica、Arial、no-serif…」から「Open Sans、Open Sans Condensed、no-serif」まで–「text-transform：uppercase」という行も削除しました。その後、すべて私のフォント「Open Sans」で問題なく動作しました。もちろん、プロジェクトの他のスタイルとフォントファミリの宣言を含む独自のスタイルシートも含めました。

そのプロジェクトでは、jQueryとjQueryMobileも使用しています。彼らは同じフォントを使用していますが（Open Sans）、同様に機能する追加のフォントを追加しました！

幸せなコーディング！

0
Utz

考えられる問題は、cordovaのデフォルトのindex.cssにあります。 body要素に "text-transform：uppercase"に対して定義されたスタイルがあるかどうかを確認します。

私にとって問題であった少なくとも、アプリケーションで使用している場合、これをデフォルトのindex.cssのbody要素から削除すると、同様に役立つ場合があります。

私にとっては私はgurmukhi/punjabiフォントを使用しており、index.cssから上記の行を削除した後は、CSSの定義だけでチャームのように機能しました

例：

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