2012-02-22 2 views
7

Недавно я добавил jQuery mobile на свой сайт.JQuery Mobile - переопределить темы шрифтов для всего тела

Однако тема jQuery нарушила мои предыдущие шрифты. Хотя большая часть моей страницы отлично работает, особенно красивые слайдеры jQuery Mobile, у меня настоящая проблема с шрифтами.

У меня есть пользовательские шрифты, и они работают правильно без jQuery mobile css. Однако, когда я включаю jQuery mobile css, он переопределяет мои шрифты.

Я попытался добавить data-role = "none" в тело и divs, но это не помогло.

Я также попытался добавить data-theme = "none", но это также не поможет.

Есть ли способ отключить пользовательские шрифты jQuery для шрифтов в теле моей страницы?

Спасибо за помощь.

ответ

9

Вот мой CSS для замены шрифта целых приложений с Roboto, в Android 4.0 ICS шрифта.

@font-face { 
    font-family: 'RobotoRegular'; 
    src: url('../font/roboto/RobotoRegular.eot'); 
    src: url('../font/roboto/RobotoRegular.eot?#iefix') format('embedded-opentype'), 
     url('../font/roboto/RobotoRegular.woff') format('woff'), 
     url('../font/roboto/RobotoRegular.ttf') format('truetype'), 
     url('../font/roboto/RobotoRegular.svg#RobotoRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
    } 

    /* Android jQM Font Style Overrides */ 
    body * { 
    font-family: "RobotoRegular" !important; 
    font-weight: normal !important; 
    } 

Возможно, вам понадобится направить определенные элементы, если вышеуказанного недостаточно. Я должен был также включить следующее:

.ui-btn-up-a,.ui-btn-hover-a,.ui-btn-down-a,.ui-bar-a,.ui-body-a,.ui-btn-up-a,.ui-btn-hover-a,.ui-btn-down-a,.ui-body-a input,.ui-body-a select,.ui-body-a textarea,.ui-body-a$ 
    font-family: "RobotoRegular"; 
    } 

Я надеюсь, что вы придете. Удачи.

0

Из того, что я понимаю ... jQuery mobile может просто отправить свои собственные CSS-шрифты в ваш микс. Если у вас есть файл css с набором шрифтов:

Попробуйте некоторые тесты, добавив! Важно для ваших стилей шрифта.

Надеется, что это поможет вам понять, решение :)

+0

Добавление важных может вызвать некоторые неприятные эффекты в долгосрочной перспективе, я бы пошел с фактическим нахождением, какие селекторы применяют шрифты и используя каскадную часть css, чтобы переопределить их. – agrublev

+0

Рассмотрение страницы это то, что я вижу для своего элемента: font-family: Helvetica, Arial, sans-serif; .ui-body-c, .ui-body-c input, .ui-body-c select, .ui-body-c textarea, кнопка .ui-body-c - Helvetica, Arial, sans-serif – AlexIIP

+0

Итак, это похоже на проблему с .ui-body-c? Мне нужно было бы переопределить это в моем css. Извините, у меня не было большого опыта работы с css, поэтому я приношу свои извинения, если мне не хватает чего-то очевидного. – AlexIIP

1

Я бы инспектировать элемент и выяснить, где именно шрифты уточняются, например, я только что узнал, что шрифт указаны здесь:

.ui-body-c, .ui-body-c input, .ui-body-c select, .ui-body-c textarea, .ui-body-c button 

Таким образом, вы можете переопределить, что в собственной таблице стилей, указав тот же селектор и представить свои собственные шрифты :)

+0

Это замечательно, я нашел, где проблема. Поскольку я не css pro, я хочу переопределить следующее: это правильный пример css? .ui-body-c, .ui-dialog.ui-overlay-c { { \t text-shadow: 0pt 0px 0pt rgb (0, 0, 0); } – AlexIIP

+0

// Это используется для переопределения тем для jQuery Mobile .ui-body-c, .ui-dialog.ui-overlay-c { \t text-shadow: 0pt 0px 0pt rgb (0, 0, 0); } } .ui-body-c, .ui-body-c ввод, .ui-body-c select, .ui-body-c textarea, .ui-body-c кнопка { \t font-family: Helvetica , Arial, sans-serif, Verdana; \t font-size: 12px; } – AlexIIP

0

Благодаря помощи по agrublev и darryn.ten следующие работал для меня:

Ниже приведены примеры, чтобы изменить тень тела и шрифты:

.ui-body-c,.ui-dialog.ui-overlay-c{ 
    text-shadow: 0pt 0px 0pt rgb(0, 0, 0); 
} 
.ui-body-c, .ui-body-c input, .ui-body-c select, .ui-body-c textarea, .ui-body-c button{ 
     font-family: Helvetica, Arial, sans-serif, Verdana; 
     font-size: 12px; 
     text-shadow: none; 
     color:black; 
} 
0

Creat свой собственный CSS для JQuery мобильное и переопределяющее семейство шрифтов дают собственное семейство шрифтов

+1

Не могли бы вы добавить пример или код, как это сделать? – tomsv

0

jquery mobile использует темы. Hit http://themeroller.jquerymobile.com/

установить шрифт на вкладке «global» (для меня: Raleway, Verdana и т. Д.), Загрузить и установить тему, и вы настроены. Для jqmobile вам нужно использовать свою тему css, jqm icons и jqm structure INSTEAD обычного одиночного jqm css.

переопределяющий материал в css может вызвать у вас различные проблемы с разными браузерами ... И это НЕ ТОЛЬКО с jquerymobile.

Смежные вопросы