21

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

4

8 回答 8

32

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

- 将您的 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;
    }

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

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

注意路径的定义！

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

  • 万维网

    • 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，该解决方案可能不起作用（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>

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

于 2012-09-17T11:01:14.527 回答
2

我也面临同样的问题。我把我的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;
}

对于具有 font-family:Helvetica、Arial、sans-serif 的任何 jquery 移动类，您必须覆盖 css 中的 font-family；至

font-family:CustomArial !important;

现在它将起作用。你可以试试这样，可能对你有用。

于 2012-11-16T06:09:33.540 回答
2

下面的作品就像使用 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;

 }
于 2013-04-30T00:25:28.003 回答
1

在这里您可以找到 .ttf 的 google 字体：https ://github.com/w0ng/googlefontdirectory

这个屏幕截图应该有帮助

在您的 .css 文件中 

@font-face {
 font-family: 'Open Sans';
 src: url('../font/OpenSans-Regular.ttf') format('truetype');
 font-weight: 400;
}
于 2015-02-03T16:15:40.360 回答
1

我面临着一个类似的问题。问题在于通过外部 css 文件提供字体时所采用的路径。为了解决这个问题，我在 index.html 的正文中声明了字体 URL 内联

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

它在以这种方式声明字体 URL 后起作用。

于 2016-02-25T08:33:11.833 回答
0 
<style type="text/css" media="screen">
    @font-face {
        font-family: 'centurySchoolbook';
        src: url('fonts/arial.ttf');
    }
   body {
       font-family: centurySchoolbook;
       font-size:30px;
   }
</style>

在字体系列和 url 上加上引号对我有用，在 html 文件内和 Android 上。

它适用于物理设备，但不适用于模拟器。

于 2014-09-18T22:21:04.157 回答
0

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

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

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

例子 ：

.demo {
   font-family: anmol
}
@font-face {
   font-family: anmol;
   src: url(../fonts/anmol.ttf);
}
于 2014-12-02T11:25:48.567 回答
0

我刚刚将我的 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”一切正常。当然，我还包括我自己的样式表以及我项目的其他样式和字体系列的声明。

我也在那个项目中使用 jQuery 和 jQueryMobile。他们使用相同的字体（Open Sans），但我添加了其他也可以使用的字体！

快乐编码！

于 2017-04-09T09:46:14.157 回答