在Android的PhoneGap的自定义字体(Custom Fonts in Android Ph

我试图使自定义字体，我的应用程序。对于这一点，我在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身体..任何帮助来解决这个..？

Answer 1:

我把它做下面的步骤后工作：

-put你的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" />

注意你的路径的定义！

例如，假设你有以下目录结构：

万维网
- 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 ...）。

所以，你可以尝试使用样式属性强加自己的风格。

例如：

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

一个缺点是，它似乎style不能上applyied 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>

希望这会为你工作了。让我知道你的结果。

Answer 2:

下面的作品般的魅力与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;

 }

Answer 3:

我也面临同样的问题。我把我的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在你的CSS出于某种jQuery Mobile的类别，它具有FONT-FAMILY：黑体，宋体，无衬线; 至

font-family:CustomArial !important;

现在，它的工作。你可以尝试这样的，可能对你有用的。

Answer 4:

在这里您可以找到的.ttf谷歌的字体： https://github.com/w0ng/googlefontdirectory

在您的.css文件

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

Answer 5:

<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并在网址的报价为我工作，在HTML文件中，并在Android上。

它的工作原理上的物理设备，但不是在模拟器。

Answer 6:

可能存在的问题在于默认index.css科尔多瓦。检查body元素有定义的样式“ 文本转换：大写 ”。

ATLEAST这是这个问题对我来说，如果你正在使用你的应用程序在默认index.css主体元素删除此之后，可能会帮助你。

对我来说，我是用古尔穆基/旁遮普语字体，上面的行取出后从index.css它只是工作一样的魅力与下面仅CSS definiitions

例如：

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

Answer 7:

我正面临一个类似的问题。问题是与在通过一个外部CSS文件给出的字体，它正在采取的路径。为了解决这个问题，我宣布在index.html的身体字体内嵌URL

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

它以这种方式宣告字体URL之后的工作。

Answer 8:

我只是复制我的TTF的字体到目录[应用程序名称] / CSS，并宣布在index.css有字体家庭。见所附图片：我的编辑index.css （检查绿色标记在附加的图片区域）。在那里，我也改变了风格的“背景附件：固定;” “黑体，宋体，无衬线...”到“开放三世，打开三世简明，无衬线”， - 我也删除行“文本转换：大写”。在那之后，一切运行良好与我的字体“打开三世”。我当然也包括我自己的样式表与其他风格和我的项目的字体家庭申报。

我还使用jQuery和jQueryMobile在该项目中。他们使用相同的字体（开放三世），但我补充说，工作以及其他字体！

编码愉快！

文章来源: Custom Fonts in Android PhoneGap