我尝试为我的应用程序制作自定义字体。 为此，我在我的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>
<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;
}
在HTML中引用你的CSS文件my_css.css:
<link rel="stylesheet" href="./path_to_your_css/my_css.css" />
注意路径的定义!
例如，假设你有以下目录结构:
www
your_html.html
css
my_css.cssfonts
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>
其中一个缺点是似乎不能在body上应用style...
因此，如果您想将字体应用于整个页面，可以尝试类似以下的方法:
<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>
我也遇到了同样的问题。我将我的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;
}
.ui-bar-a, .ui-bar-a input, .ui-bar-a select, .ui-bar-a textarea, .ui-bar-a button {
font-family: CustomArial !important;
}
您需要在CSS中覆盖具有font-family: Helvetica, Arial, sans-serif;的任何jquery移动类的字体族
请将其改为：font-family:CustomArial !important;
@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文件给出时，它所采用的路径上。 为了解决这个问题，我在index.html的正文中内联声明了字体URL。
<div>
<style scoped>
@font-face {
font-family: Monotype Corsiva;
src: url('fonts/Monotype_Corsiva.ttf') format('truetype');
}
</style>
</div>
在这里，您可以找到谷歌字体的.ttf文件：https://github.com/w0ng/googlefontdirectory
@font-face {
font-family: 'Open Sans';
src: url('../font/OpenSans-Regular.ttf') format('truetype');
font-weight: 400;
}
可能的问题在于 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);
}
<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 上。
它在实体设备上运行，但在模拟器上不起作用。
src: url(/fonts/arial.ttf);（没有双引号"）。难道不应该是src: url("/fonts/arial.ttf");吗？你能否使用这个修改测试你的代码？ - Littm