Android PhoneGap 中的自定义字体答案

【问题标题】：Custom Fonts in Android PhoneGapAndroid PhoneGap 中的自定义字体
【发布时间】：2012-09-17 07:18:04
【问题描述】：

我尝试为我的应用程序制作自定义字体。为此，我在我的 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 正文。任何帮助解决这个问题..？？

【问题讨论】：

您在 URL 周围忘记了 ''。添加这些时它会起作用吗？
我认为 Klaasvaak 表示您在 CSS 代码中输入了 src: url(/fonts/arial.ttf); （没有双引号 "）。不应该是src: url("/fonts/arial.ttf"); 吗？你能用这个修改测试你的代码吗？
我也试过这样..但是o/p是一样的..
事实上，您可以尝试将 CSS 代码放在 css 文件中，而不是放在 HTML 中。我不知道为什么，但似乎将 CSS 直接放在 HTML 中会使其不起作用：S...

标签： android cordova custom-font

【解决方案1】：

我做了以下步骤后让它工作了：

-将您的 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;
    }

-在您的 HTML 中引用您的 CSS 文件 my_css.css：

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

一个缺点是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>

希望这对你也有用。让我知道你的结果。

【讨论】：

谢谢你的帖子，我用正确的路径尝试了同样的方法。但是，仍然没有改变。
哦... :( ...您使用的是 Android 还是 iOS？另外，您使用的是 jQuery Mobile 之类的库吗？
Android，并包含以下标签：
:O...哦，我明白了...我不确定，但我认为 jQuery Mobile 正在“干扰”...给我一些时间...
嘿伙计，您想在 HTML 的特定部分使用该字体，还是想在页面的任何地方都使用它？

【解决方案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;

 }

【讨论】：

我试过了，但不幸的是，它没有用。当我使用 firefox 或 chrome 测试页面时，一切正常，但在模拟器中失败。你有什么想法吗？
我在IOS上针对xcode进行了测试。你在安卓上试试吗？
是的，我正在android中尝试，有什么办法吗？
我还没试过移植到安卓，你可以试试问这个问题。
还有一些解释为什么“它就像一个魅力”？

【解决方案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:Helvetica、Arial、sans-serif 的任何 jquery 移动类，您必须在 css 中覆盖 font-family；到

font-family:CustomArial !important;

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

【讨论】：

【解决方案4】：

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

在你的 .css 文件中

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

【讨论】：

【解决方案5】：

我遇到了类似的问题。问题在于通过外部 css 文件提供字体时所采用的路径。为了解决这个问题，我在 index.html 的正文中声明了字体 URL 内联

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

以这种方式声明字体 URL 后，它起作用了。

【讨论】：

【解决方案6】：

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

在字体系列和 url 上加上引号对我有用，在 html 文件内和 Android 上。

它适用于物理设备，但不适用于模拟器。

【讨论】：

【解决方案7】：

可能的问题在于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);
}

【讨论】：

【解决方案8】：

我刚刚将我的 ttf-fonts 复制到目录 [app-name]/css 中，并在那里的 index.css 中声明了字体系列。见附图：my edited index.css（查看附图中的绿色标记区域）。在那里我还更改了样式“背景附件：固定；” “Helvetica, Arial, no-serif…” 到 “Open Sans, Open Sans Condensed, no-serif”，我还删除了“text-transform:uppercase”这一行。之后，我的字体“Open Sans”一切正常。当然，我还包含了我自己的样式表以及我项目的其他样式和字体系列的声明。

我也在那个项目中使用 jQuery 和 jQueryMobile。他们使用相同的字体（Open Sans），但我添加了其他也可以使用的字体！

编码愉快！

【讨论】：

我的浏览器是疯了还是你确实发布了 3 次相同的答案？！？
很抱歉，因为我是新来的……我只是想更正我的句子中的某些内容，并认为它会更新，但它发布了副本……抱歉:(
我尝试“删除最近的帖子”，但没有用。
终于——我明白了！一定是缓存问题，因为我使用后退按钮来编辑我的第一个答案。以前在任何地方都找不到编辑按钮 - 但现在它就在这里。