No el html del formulario de entrada de elementos tales como el campo de entrada de texto o seleccione la casilla de heredan automáticamente la fuente-la propiedad de la familia desde el cuerpo?
Por ejemplo:

body {
 font-family:'Lucida Casual', 'Comic Sans MS';
}

No va a utilizar el tipo de letra en el formulario a continuación campo de entrada:

<form> 
   <div>
        <label for="name">Name</label>  
        <input id="name" name="name" type="text" />  

   <div>
</form>

Por favor, eche un vistazo a http://jsfiddle.net/3fkNJ/

Es común que tenemos que volver a definir la familia de la fuente para los campos de entrada, o estoy haciendo algo mal?

InformationsquelleAutor sunjie | 2011-06-29

4 Comentarios

  1. 44

    Sí, usted necesita para colocar la font en el input etiqueta.

    input{
      padding:5px;
      font-size:16px;
      font-family:'Lucida Casual', 'Comic Sans MS';    
    }

    http://jsfiddle.net/jasongennaro/3fkNJ/1/

    También puede utilizar inherit para establecer el font en form campos.

    input, textarea, select { font-family:inherit; }

    http://jsfiddle.net/jasongennaro/3fkNJ/7/

    EDITAR – añadió una explicación

    La mayoría de los navegadores de procesamiento de texto dentro de form elementos como la del sistema operativo del usuario. Esto es para evitar que, como yo lo entiendo, un aspecto común y la sensación para el usuario. Sin embargo, todo puede ser sobrescrito por el código anterior.

    • Esto no funciona en el caso de jquery autocomplete. ¿Usted tiene idea de por qué?
    • es probablemente debido a que la función autocompletar de manera más específica selector css. He comprobado jqueryui.com/autocomplete, y se muestra la input tiene un id de «etiquetas». Establecer la fuente en que id y usted debe ser bueno.
  2. 1

    Pruebe a cambiar el CSS atributo cuerpo a

    body *{font-family:'Lucida Casual', 'Comic Sans MS';}

    La * fuerzas de cada elemento secundario para heredar el valor especificado en la regla CSS que usted ha escrito, porque las reglas CSS más de especificación. Ver el el violín aquí

    Esto es útil si desea que cada elemento en su página para tener el mismo font-family valor, no es tan útil si usted no quiere que sus formularios tienen diferente valor.

    Smashing Magazine tiene un artículo que puede ayudarle en el futuro.

    Espero te sirva de ayuda.

    • Esto va a funcionar, pero es descuidado la práctica. El rendimiento se lleva a un éxito de la * selector, y el * tendrá prioridad en maneras que usted puede no implícitamente esperar.
    • No lo ha «descuidado la práctica», sólo significa que cuando se utilizan, la persona necesita comprender qué es lo que están haciendo por lo tanto los Smashing Magazine de referencia. Tan lejos como el rendimiento, sí se utiliza el mayor explorador de sobrecarga, pero si es adecuado depende del objetivo, debe cada elemento tiene la misma fuente, independientemente o jus algunos elementos? Si es sólo un par de elementos, a continuación, especificar en el selector es mejor. Me sunjie es claro que él quiere que todos los elementos tienen el mismo independientemente de la fuente así que mi solución sería apropiado para hacer cumplir esto, pero sí, va a tener su peajes en otros lugares.
    • Creo que no entendieron bien, exactamente lo que yo decia era «descuidado la práctica». Aunque sería preferible para evitar que extraños * selectores, usando sólo uno no es necesariamente «descuidado la práctica’. Por otro lado, el uso de CSS para evitar la herencia de la idiosincrasia ES «descuidado la práctica». En ninguna parte el estado autor quiere el universal preceden a los selectores con una fuente determinada familia.
    • Donde el autor no dice específicamente que él quiere que todo sea heredado está implícita en la primera línea de la pregunta, como se supone es una solución apropiada. La referencia ha sido suministrados, por lo que dependiendo de sus necesidades que tiene la elección. Agradezco tu comentario
    • Gracias por tu respuesta. Creo que la solución no perjudicar el rendimiento. Un montón de artículos recomienda el uso de *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } tenemos algunas universal de los selectores de todos modos.
  3. 0

    a mí me funcionó:

    tags-input *, tags-input *:before, tags-input *:after {
      font-family: "IRANSans" !important;
    }
    
    tags-input .tags .input {
      padding-right: 5px;
      float: right !important;
      font: 13px "IRANSans", tahoma !important;
    }
    
    tags-input .tags .tag-item {
      float: right !important;
      font: 13px "IRANSans", tahoma !important;
    }

Dejar respuesta

Please enter your comment!
Please enter your name here