JQuery Mobile - Anular los temas de la familia de fuentes para todo el cuerpo

Question

Recientemente agregué jQuery mobile a mi sitio web.

Sin embargo, el tema jQuery rompió mis fuentes anteriores. Si bien la mayor parte de mi página funciona muy bien, especialmente los buenos controles deslizantes jQuery Mobile, estoy teniendo un problema real con las fuentes.

Tengo fuentes personalizadas establecidas y funcionan correctamente sin el jquery mobile css. Sin embargo, una vez que incluyo el jquery mobile css anula mis fuentes.

He intentado agregar data-role = "none" al cuerpo y los divs pero eso no ayudó.

También he intentado agregar data-theme = "none" pero eso tampoco ayuda.

¿Hay alguna manera de desactivar el texto jQuery personalizado de la familia de fuentes en el cuerpo de mi página?

Gracias por la ayuda.

Answer 1

Aquí está mi CSS para reemplazar la fuente aplicaciones completas con Roboto, el ICS fuente de Android 4.0.

@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; 
    } 

Puede que también tenga que segmentar los elementos específicos si lo anterior no es suficiente. También tuve que incluir lo siguiente:

.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"; 
    } 

Espero que entiendas bien. Buena suerte.

Answer 2

Por lo que entiendo ... jQuery mobile podría simplemente enviar sus propias fuentes CSS a su mezcla. Si tiene un archivo CSS con el conjunto de fuentes:

Pruebe algunas pruebas añadiendo! Importante para sus estilos de fuente.

Hope esto le ayudará a encontrar una solución :)

Answer 3

Me inspeccionar el elemento y saber exactamente donde las fuentes se están especificando, por ejemplo, acabo de encontrar que la fuente del se especifican aquí:

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

Así que se puede reemplazar en su propia hoja de estilo especificando el mismo selector y presentar sus propias fuentes :)

Answer 4

Gracias a la ayuda de agrublev y darryn.ten los siguientes trabajaron para mí:

Estos son algunos ejemplos de cambiar la sombra de las fuentes del cuerpo y:

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

Answer 5

creat su propio CSS para jQuery la familia de fuente móvil e invalidada proporciona su propia familia de fuentes

Answer 6

jquery mobile usa themes. Hit http://themeroller.jquerymobile.com/

establece la fuente en la pestaña "global" (para mí: Raleway, Verdana, etc.), descarga e instala el tema y listo. Para jqmobile, necesita utilizar el tema css, los iconos jqm y la estructura jqm EN LUGAR de la única jqm css.

reemplazar cosas en css puede causarle problemas con diferentes navegadores ... Y ese no es el punto con jquerymobile.