Fatal编程技术网
  • android/
  • Android PhoneGap中的自定义字体

Android PhoneGap中的自定义字体

android cordova

Android PhoneGap中的自定义字体,android,cordova,custom-font,Android,Cordova,Custom Font,我试图为我的应用程序定制字体。为此，我在html文件中编写了以下代码： <style type="text/css" media="screen"> @font-face { font-family: centurySchoolbook; src: url(/fonts/arial.ttf); } body { font-family: centurySchoolboo

我试图为我的应用程序定制字体。为此，我在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>


@字体{
字体系列：centurySchoolbook；
src:url（/font/arial.ttf）；
}
身体{
字体系列：centurySchoolbook；
字体大小：30px；
}
在我的Html正文中：

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

</body>


自定义字体
这是样品
但是，这些样式不适用于我的html正文。。
解决此问题的任何帮助…？

我在执行以下步骤后使其正常工作：

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

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

注意路径的定义

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

  • 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;
    }
以及：

注意：如果使用jQuery Mobile，解决方案可能无法工作（jQuery Mobile将“干扰”css…）

因此，您可以尝试使用“样式”属性来强制使用样式

例如：

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

我也面临同样的问题。我把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;
}
对于任何具有字体系列的jquery mobile类，您都必须覆盖css中的字体系列：Helvetica、Arial、sans serif；到

font-family:CustomArial !important;
现在它可以工作了。您可以这样尝试，可能对您有用。

下面的工作原理类似于jQueryMobile和Phonegap的charm for custom字体：

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

 }


@字体{
字体系列：“centurySchoolbook”；
src:url（'font/arial.ttf'）；
}
身体{
字体系列：centurySchoolbook；
字体大小：30px；
}
在html文件和Android上，字体系列和url上的引号对我很有用

它可以在物理设备上工作，但不能在emulator上工作。

可能的问题在于cordova中的default index.css。检查body元素是否为“文本转换：大写”定义了样式

至少在从default index.css中的body元素中删除这个元素之后，这对我来说是个问题，如果您在应用程序中使用，可能也会对您有所帮助

对我来说，我使用的是gurmukhi/punjabi字体，在从index.css中删除了上面的行之后，它就像魅力一样，只使用下面的css定义

例如：

.demo {
   font-family: anmol
}
@font-face {
   font-family: anmol;
   src: url(../fonts/anmol.ttf);
}
您可以在这里找到.ttf谷歌字体：

在您的.css文件中

@font-face {
 font-family: 'Open Sans';
 src: url('../font/OpenSans-Regular.ttf') format('truetype');
 font-weight: 400;
}
我面临着一个类似的问题。问题在于通过外部css文件提供字体时所采用的路径。 为了解决这个问题，我在index.html的主体中内联声明了字体URL

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


@字体{
字体系列：单字体Corsiva；
src:url（'font/Monotype_Corsiva.ttf'）格式（'truetype'）；
}
在以这种方式声明字体URL后，它就工作了。

我刚刚将我的ttf字体复制到目录[app name]/css中，并在那里的index.css中声明了字体系列。参见附图：（检查附图中绿色标记的区域）。在那里，我还将样式“背景附件：固定”，“Helvetica，Arial，无衬线…”更改为“开放式SAN，开放式SAN压缩，无衬线”–我还删除了行“文本转换：大写”。在那之后，我的字体“opensans”一切都很好。 当然，我还包括了我自己的样式表以及我的项目中其他样式和字体系列的声明

我还在该项目中使用jQuery和jQueryMobile。它们使用相同的字体（开放式Sans），但我添加了其他同样有效的字体

快乐编码

您在URL中忘记了“”。当你添加这些内容时，它能工作吗？我认为Klasvaak的意思是你键入了
src:url（/font/arial.ttf）（没有双引号
“
）在CSS代码中。它不应该是
src:url（“/fonts/arial.ttf”）吗
？你能用这个修改来测试你的代码吗？我也这样试过。但是o/p是一样的。事实上，你可以试着把你的CSS代码放在CSS文件中，而不是放在HTML中。我不知道为什么，但似乎把CSS直接放在HTML中会使它不起作用：S…谢谢你的帖子，我用正确的路径尝试了同样的方法。但是，仍然没有改变。哦…：（…你使用的是Android还是iOS？还有，你使用的是像jQuery Mobile？Android这样的库，包括下面的标签：：O…哦，我明白了…我不确定，但我认为jQuery Mobile是“干涉错误”的"…给我几秒钟…嘿，伙计，你想在HTML的特定部分使用字体，还是想在页面的任何地方都使用字体？我试过了，但不幸的是，它不起作用。当我使用firefox或chrome测试页面时，一切正常，但在emulator中失败。你知道吗？我在IOS上用xcode测试了它。你在尝试吗安卓上的t？是的，我正在安卓上尝试，有什么方法可以做到吗？我还没有尝试移植到安卓，你应该试着问这个问题。还有一些解释为什么“它工作起来很有魅力”？是我的浏览器疯了，还是你发了三次相同的答案？！很抱歉，因为我是新来的…我只是想更正句子中的某些内容，并认为它会更新，但它发布了副本…抱歉：（我试图“删除最近的帖子”但这不起作用。最后，我明白了！一定是缓存问题，因为我使用了“后退”按钮进行编辑

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



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