アプリケーション用にカスタムフォントを作成しようとしました。そのために、私は自分の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;
}
-HTMLでCSSファイルを参照my_css.cssします。
<link rel="stylesheet" href="./path_to_your_css/my_css.css" />
パスの定義に注意してください！
たとえば、次のディレクトリ構造があるとします。
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;
}
と：
<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>
欠点の1つは、に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>
これがあなたにも役立つことを願っています。結果を教えてください。
私も同じ問題に直面しました。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 mobileクラスの場合、cssのfont-familyをオーバーライドする必要があります。に
font-family:CustomArial !important;
今それは動作します。あなたはこのように試すことができます、あなたにとってそれは役に立つかもしれません。
以下は、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;
}
ここで.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;
}
私は同様の問題に直面していました。問題は、フォントが外部のcssファイルを介して与えられたときにたどったパスにありました。これを解決するために、index.htmlの本文でフォントURLをインラインで宣言しました
<div>
<style scoped>
@font-face {
font-family: Monotype Corsiva;
src: url('fonts/Monotype_Corsiva.ttf') format('truetype');
}
</style>
</div>
このようにフォントURLを宣言した後、動作しました。
<style type="text/css" media="screen">
@font-face {
font-family: 'centurySchoolbook';
src: url('fonts/arial.ttf');
}
body {
font-family: centurySchoolbook;
font-size:30px;
}
</style>
font-familyとurlに引用符を付けて、htmlファイル内とAndroidで機能しました。
物理デバイスでは機能しますが、エミュレーターでは機能しません。
考えられる問題は、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);
}
ttf-fontsをディレクトリ[app-name]/cssにコピーし、そこでindex.cssでfont-familiesを宣言しました。添付の画像を参照してください： 編集したindex.css（添付の画像の緑色のマークが付いた領域を確認してください）。そこで、「background-attachment：fixed;」のスタイルも変更しました。「Helvetica、Arial、no-serif…」から「OpenSans、Open Sans Condensed、no-serif」–「text-transform：uppercase」という行も削除しました。その後、私のフォント「OpenSans」ですべてがうまくいきました。もちろん、自分のプロジェクトの他のスタイルやフォントファミリの宣言を含む自分のスタイルシートも含めました。
そのプロジェクトではjQueryとjQueryMobileも使用しています。同じフォント（Open Sans）を使用していますが、同様に機能するフォントを追加しました。
ハッピーコーディング！
