Пользовательские шрифты в Android PhoneGap

Я попытался создать пользовательские шрифты для своего приложения. Для этого я написал этот код в своем 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:

<body onload="init();">
<h>Custom Fonts</h>
    <div>This is for sample</div>

</body>

Но эти стили не применяются к моему телу html. Любая помощь для решения этого вопроса.??

Ответы

Ответ 1

Я сделал это после выполнения следующих действий:

- Добавьте свой 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

    • Шрифты

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

Надеюсь, это сработает и для вас. Сообщите мне о ваших результатах.

Ответ 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;
}

Вы должны переопределить семейство шрифтов в своем CSS для любого класса jquery mobile, имеющего семейство шрифтов: Helvetica, Arial, sans-serif; к

font-family:CustomArial !important;

Теперь это сработает. Вы можете попробовать, как это, может быть полезно для вас.

Ответ 3

Ниже работает как шарм для пользовательского шрифта с 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;

 }

Ответ 4

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

Он работает на физических устройствах, но не на эмуляторе.

Ответ 5

Возможные проблемы заключаются в дефолте index.css в кордове. Проверьте, имеет ли элемент body стиль, определенный для " text-transform: uppercase".

По крайней мере, это было проблемой для меня, после удаления этого элемента body по умолчанию index.css, если вы используете в своем приложении, также может помочь вам.

Для меня я использовал шрифты gurmukhi/punjabi, а после удаления строки из index.css он просто работал как charm с ниже определениями css

Пример:

.demo {
   font-family: anmol
}
@font-face {
   font-family: anmol;
   src: url(../fonts/anmol.ttf);
}

Ответ 6

здесь вы можете найти .ttf шрифты google: https://github.com/w0ng/googlefontdirectory

this screenshot should help

в вашем .css файле

@font-face {
 font-family: 'Open Sans';
 src: url('../font/OpenSans-Regular.ttf') format('truetype');
 font-weight: 400;
}

Ответ 7

Я столкнулся с аналогичной проблемой. Проблема заключалась в том, какой путь он использовал, когда шрифт был предоставлен через внешний файл css. Чтобы решить эту проблему, я объявил URL-адрес шрифта inline в теле index.html

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

Он работал после объявления URL-адреса шрифта таким образом.

Ответ 8

Я просто скопировал свои ttf-шрифты в каталог [app-name]/css и объявил семейства шрифтов в index.css. См. Прикрепленное изображение: измененный index.css (отметьте зеленые отмеченные области на прикрепленном рисунке). Там я также изменил стиль "background-attachment: fixed;" "Helvetica, Arial, no-serif..." на "Open Sans, Open Sans Condensed, no-serif", - я также удалил строку "text-transform: uppercase". После этого все отлично работало с моим шрифтом "Open Sans". Конечно, я также включил мою собственную таблицу стилей с объявлениями других стилей и семейств шрифтов моего проекта.

Я также использую jQuery и jQueryMobile в этом проекте. Они используют тот же шрифт (Open Sans), но я добавил дополнительные шрифты, которые тоже работают!

Счастливое кодирование!