Android PhoneGap 中的自定义字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12454681/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Custom Fonts in Android PhoneGap
提问by Littm
I tried to make custom fonts for my application. For that, I wrote this code in my html file:
我试图为我的应用程序制作自定义字体。为此，我在我的 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>
In my Html Body:
在我的 HTML 正文中：
<body onload="init();">
<h>Custom Fonts</h>
<div>This is for sample</div>
</body>
But, these styles are not applied to my html body.. Any help to solve this..??
但是，这些样式不适用于我的 html 正文.. 任何帮助解决这个问题..??
回答by Littm
I made it work after doing the following steps:
我在执行以下步骤后使它工作：
-Put your CSS in a file, for example my_css.css:
- 将您的 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;
}
-Reference your CSS file my_css.cssin your HTML:
-my_css.css在您的 HTML 中引用您的 CSS 文件：
<link rel="stylesheet" href="./path_to_your_css/my_css.css" />
<link rel="stylesheet" href="./path_to_your_css/my_css.css" />
Pay attention to the definition of your paths!
注意路径的定义！
For example, let's say you have the following directory structure:
例如，假设您有以下目录结构：
www
your_html.htmlcss
my_css.css
fonts
arial.ttf
万维网
your_html.htmlcss
my_css.css
字体
arial.ttf
Then, you would have:
然后，您将拥有：
@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;
}
and:
和：
<link rel="stylesheet" href="./css/my_css.css" />
<link rel="stylesheet" href="./css/my_css.css" />
Note:if you use jQuery Mobile, the solution may not work (jQuery Mobile will "interfere" with the css...).
注意：如果您使用 jQuery Mobile，该解决方案可能不起作用（jQuery Mobile 将“干扰”css...）。
So, you may try to impose your style by using the style attribute.
因此，您可以尝试使用 style 属性来强加您的风格。
Eg:
例如：
<body>
<h>Custom Fonts</h>
<div style="font-family: 'customfont';">This is for sample</div>
</body>
One drawback is that it seems that the stylecannot be applyied on body...
一个缺点是它似乎style不能应用于body...
So, if you want to apply the font to the whole page, you may try something like this:
所以，如果你想把字体应用到整个页面，你可以尝试这样的事情：
<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>
Hope this will work for you too. Let me know about your results.
希望这对你也有用。让我知道你的结果。
回答by user
I also faced the same problem. I put my css file in the cssfolder. I put the ttf file in just the wwwfolder and it didn't work properly, so I moved my ttf file into the cssfolder. Here is my code:
我也面临同样的问题。我把我的 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;
}
If you are using jquery mobile, you have to override the font like:
如果您使用的是 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;
}
You have to override the font-family in your css for whatever jquery mobile class having font-family:Helvetica, Arial, sans-serif; to
对于任何具有 font-family:Helvetica、Arial、sans-serif 的 jquery mobile 类，您都必须覆盖 css 中的 font-family；到
font-family:CustomArial !important;
Now it will work. You can try like this, may be its useful for you.
现在它将起作用。你可以这样试试，可能对你有用。
回答by amol-c
Below works like charm for custom font with jQueryMobile and Phonegap:
下面的工作就像使用 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;
}
回答by dam1
here your can find the .ttf the google fonts : https://github.com/w0ng/googlefontdirectory
在这里你可以找到 .ttf 谷歌字体：https: //github.com/w0ng/googlefontdirectory
in your .css file
在你的 .css 文件中
@font-face {
font-family: 'Open Sans';
src: url('../font/OpenSans-Regular.ttf') format('truetype');
font-weight: 400;
}
回答by Shefali Agarwal
I was facing a similiar issue. The problem was with the path it was taking when the font was given through an external css file. To resolve this, i declared the font URL inline in the body of index.html
我面临着类似的问题。问题出在通过外部 css 文件提供字体时所采用的路径。为了解决这个问题，我在 index.html 的正文中声明了字体 URL 内联
<div>
<style scoped>
@font-face {
font-family: Monotype Corsiva;
src: url('fonts/Monotype_Corsiva.ttf') format('truetype');
}
</style>
</div>
It worked after declaring the font URL in this manner.
它在以这种方式声明字体 URL 后工作。
回答by Utz
I just copied my ttf-fonts into the directory [app-name]/css and declared the font-families in the index.css there. See attached image: my edited index.css(Check the green marked areas in the attached picture). There i also changed the style "background-attachment:fixed;" "Helvetica, Arial, no-serif…" to "Open Sans, Open Sans Condensed, no-serif", – i also deleted the line "text-transform:uppercase". After that everything worked fine with my font "Open Sans". Of course i also included my own stylesheet with declarations of the other styles and font-families of my project.
我只是将我的 ttf-fonts 复制到目录 [app-name]/css 并在那里的 index.css 中声明字体系列。参见附图： 我编辑的 index.css（检查附图中的绿色标记区域）。我还更改了样式“背景附件：固定；” “Helvetica、Arial、no-serif……”到“Open Sans，Open Sans Condensed，no-serif”， – 我还删除了“text-transform:uppercase”这一行。之后，我的字体“Open Sans”一切正常。当然，我还包括我自己的样式表，其中包含我项目的其他样式和字体系列的声明。
I am also using jQuery and jQueryMobile in that project. They use the same font (Open Sans), but i added additional fonts that work as well!
我也在那个项目中使用 jQuery 和 jQueryMobile。他们使用相同的字体（Open Sans），但我添加了额外的字体！
Happy coding!
快乐编码！
回答by Vinte Segundos
<style type="text/css" media="screen">
@font-face {
font-family: 'centurySchoolbook';
src: url('fonts/arial.ttf');
}
body {
font-family: centurySchoolbook;
font-size:30px;
}
</style>
with quotes on the font-family and on the url worked for me, inside the html file and on Android.
在字体系列和 url 上加上引号对我有用，在 html 文件中和在 Android 上。
It works on physical devices, but not on emulator.
它适用于物理设备，但不适用于模拟器。
回答by Ajeet Singh
The possible issues lies in default index.css in cordova. Check if the body element has style defined for "text-transform:uppercase".
可能的问题在于cordova 中的默认index.css。检查 body 元素是否具有为“ text-transform:uppercase”定义的样式。
Atleast that was the issue for me, after removing this from body element in default index.css if you are using in your application, may help you as well.
至少这对我来说是个问题，如果您在应用程序中使用，从默认 index.css 中的 body 元素中删除它之后，也可能对您有所帮助。
For me I was using gurmukhi/punjabi fonts, and after the above line removal from index.css it just worked like charm with below css definiitions only
对我来说，我使用的是 gurmukhi/punjabi 字体，在从 index.css 中删除上面的行之后，它就像魅力一样，只有下面的 css 定义
Example :
例子 ：
.demo {
font-family: anmol
}
@font-face {
font-family: anmol;
src: url(../fonts/anmol.ttf);
}
