在Android的PhoneGap的自定义字体自定义、字体、Android、PhoneGap

2023-09-12 23:39:30 作者:梦千年之恋

我试图使自定义字体为我的申请。对于这一点,我在HTML文件中写了这code:

I tried to make custom fonts for my application. For that, I wrote this code in my html file:

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

But, these styles are not applied to my html body.. Any help to solve this..??

推荐答案

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

I made it work after doing the following steps:

-put在一个文件你的CSS,例如 my_css.css

-Put your CSS in a file, for example 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

-Reference your CSS file my_css.css in your HTML:

&LT;链接相对=样式表的href =./ path_to_your_css / my_css.css/&GT;

注意你的路径定义!

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

For example, let's say you have the following directory structure:

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

&LT;链接相对=样式表的href =./ CSS / my_css.css/&GT;

注意:如果您使用jQuery Mobile的,该解决方案可能无法正常工作(jQuery Mobile的将妨碍的CSS ...)。

Note: if you use jQuery Mobile, the solution may not work (jQuery Mobile will "interfere" with the css...).

所以,你可以尝试通过使用style属性强加自己的风格。

So, you may try to impose your style by using the style attribute.

例如:

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

一个缺点是,它似乎风格不能在体applyied ...

所以,如果你想要的字体应用到整个页面,你可以尝试这样的:

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.