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身体。任何帮助来解决这个.. ??

Solutions Collecting From Web of "Android PhoneGap中的自定义字体"

我做了以下步骤后,它的工作:

– 把你的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中my_css.css你的CSS文件my_css.css

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


注意path的定义!

例如,假设您有以下目录结构:

  • 万维网

    • 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,则解决scheme可能无法正常工作(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> 

希望这也能为你工作。 让我知道你的结果。

下面的作品像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; } 

我也面临同样的问题。 我把我的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的手机,你必须重写字体,如:

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

你必须重写你的CSS的字体家族,无论什么jQuery的移动类有font-family:Helvetica,Arial,sans-serif; 至

 font-family:CustomArial !important; 

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

 <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中为我工作。

它适用于物理设备,但不适用于仿真器。

可能的问题在于cordova默认的index.css。 检查body元素是否具有为“ text-transform:uppercase ”定义的样式。

至less这对我来说是个问题,如果你在你的应用程序中使用了index.css中的body元素,那么这个问题也可以帮助你。

对我来说,我使用gurmukhi /旁遮普语字体,并从index.css上述行删除后,它只是像魅力与低于CSS的定义

例如:

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

在这里你可以find.ttf谷歌字体: https : //github.com/w0ng/googlefontdirectory

这个截图应该有帮助

在你的.css文件中

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

我遇到了类似的问题。 问题是当字体是通过一个外部的CSS文件给的path。 为了解决这个问题,我在index.html的主体中声明了内嵌的字体URL

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

它以这种方式声明字体的URL后工作。

我只是将我的ttf字体复制到目录[app-name] / css中,并在index.css中声明了font-family。 见附图: 我编辑的index.css (查看附图中绿色标记的区域)。 在那里,我也改变了“背景附件:固定”的风格。 “Helvetica,Arial,no-serif …”改为“Open Sans,Open Sans Condensed,no-serif”, – 我也删除了“text-transform:uppercase”这一行。 之后,一切正常,我的字体“打开三星”。 当然,我也包括我自己的样式表与我的项目的其他样式和字体家族的声明。

我也在该项目中使用jQuery和jQueryMobile。 他们使用相同的字体(Open Sans),但我添加了额外的字体,以及!

快乐的编码!