程序员经验分享-hwhale

Android PhoneGap 中的自定义字体

2024-05-13

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


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

- 例如，将 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;
    }

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

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

注意路径的定义！

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

  • www

    • your_html.html

    • css

      • my_css.css

    • fonts

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

and:

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

Note:如果您使用 jQuery Mobile，该解决方案可能不起作用（jQuery Mobile 将“干扰”CSS...）。

因此，您可以尝试使用 style 属性来强加您的样式。

Eg:

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

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

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Android

Cordova

customfont

Android PhoneGap 中的自定义字体 的相关文章

随机推荐

热门标签