tamaño de fuente para el botón y Link

Question

Probé este simple html:

TEST FONT SIZE</br> 
<input type="button" value="test bytton" style="font-size:20px"> 
<a style="font-size:20px">test link</a> 

y descubrió que el tamaño de la fuente de este botón se ve más grande que el tamaño de la fuente del enlace, a pesar de estilo. ¿Alguien sabe por qué el estilo funciona de manera diferente para el enlace y para el botón, y cómo hacer que se vea igual?

Answer 1

El tamaño de la fuente es el mismo. Pero parece diferente porque la fuente de la página predeterminada es diferente de la fuente predeterminada del campo de entrada. Establezca el font-family en ambos elementos del mismo modo y se verán igual.

por lo general lo hago:

body, input, button, select, option, textarea { 
    font-family: ...; /* whatever font */ 
} 
body { 
    font-size: x%; /* whatever base font size I want */ 
} 
input, button, select, option, textarea { 
    font-size: 100%; 
} 

para obtener fuentes coherentes en los campos de la página y la forma.

Answer 2

No debe usar mucho CSS para botones, ya que su visualización depende del sistema operativo de los usuarios.

En su lugar, puede utilizar para las imágenes de ejemplo.

Answer 3

se ve igual a mí, probado en Firefox, Internet Explorer 6 y Chrome: http://jsbin.com/oveze
Por favor, tenga en cuenta:

• Esto depende del navegador y sus valores por defecto, y también puede ser diferente dependiendo de la operación sistema.
• Muy a menudo hay una fuente diferente para botones y campos de entrada. Establecerlo también
• Anti-aliasing o ClearType pueden causar una ligera diferencia cuando no tiene los mismos colores (fondo y fuente).

Answer 4

tenía el mismo problema en Chrome, más tarde descubrió que la causa fundamental fue

body { 
    -webkit-font-smoothing: antialiased 
} 

cambiar esto a

body { 
    -webkit-font-smoothing: subpixel-antialiased; 
} 

arreglado.