style fuentes font family color html fonts font-size

html - fuentes - Cómo convertir<font size="10"> a px?



html font family (8)

Necesito convertir <font size="10"> a px.

Ejemplo solamente (no correcto): <font size="10"> es equivalente a 12px.

¿Hay alguna fórmula o conversión de tabla para convertir <font size="10"> a px?


De acuerdo con W3 :

Este atributo establece el tamaño de la fuente. Valores posibles:

  • Un número entero entre 1 y 7. Esto establece la fuente en un tamaño fijo, cuya representación depende del agente de usuario. No todos los agentes de usuario pueden representar los siete tamaños.
  • Un aumento relativo en el tamaño de fuente. El valor "+1" significa un tamaño más grande. El valor "-3" significa tres tamaños más pequeños. Todos los tamaños pertenecen a la escala de 1 a 7.

Por lo tanto, la conversión que está solicitando no es posible. El navegador no está obligado a usar tamaños específicos con atributos de size específicos.

También tenga en cuenta que W3 desaconseja el uso del elemento de font a favor de las hojas de estilo .


En general, no puede confiar en un tamaño de píxel fijo para las fuentes, el usuario puede escalar la pantalla y los valores predeterminados no son siempre los mismos (depende de la configuración de PPP de la pantalla, etc.).

Tal vez echar un vistazo a this (de píxel a punto) y este enlace .

Pero, por supuesto, puede establecer el tamaño de fuente en px, para que sepa cuántos píxeles tiene la fuente en realidad. Esto puede ayudar si realmente necesita un diseño fijo, pero esta práctica reduce la accesibilidad de su sitio web.


Esto es realmente antiguo, pero <font size="10"> sería aproximadamente <p style= "font-size:55px">


Esto no se puede responder tan fácilmente. Depende de la fuente utilizada y de los puntos por pulgada (ppi). This debería dar una visión general del problema.


Usando los puntos de datos de la respuesta aceptada puede usar la interpolación polinomial para obtener una fórmula.

WolframAlpha Entrada: polinomio de interpolación {{1, .63}, {2, .82}, {3,1}, {4,1.13}, {5,1.5}, {6, 2}, {7,3}}

Fórmula: 0.00223611x ^ 6 - 0.0530417x ^ 5 + 0.496319x ^ 4 - 2.30479x ^ 3 + 5.51644x ^ 2 - 6.16717x + 3.14

Y usar en código Groovy:

import java.math.* def convert = {x -> (0.00223611*x**6 - 0.053042*x**5 + 0.49632*x**4 - 2.30479*x**3 + 5.5164*x**2 - 6.167*x + 3.14).setScale(2, RoundingMode.HALF_UP) } (1..7).each { i -> println(convert(i)) }


el mapeo del tamaño de fuente a em solo es exacto si no hay un tamaño de fuente definido y cambia cuando el contenedor se configura en diferentes tamaños.

Lo siguiente funciona mejor para mí, pero no tiene en cuenta el tamaño = 7 y cualquier valor superior a 7 solo se representa como 7.

font size=1 = font-size:x-small font size=2 = font-size:small font size=3 = font-size:medium font size=4 = font-size:large font size=5 = font-size:x-large font size=6 = font-size:xx-large


en pixeles
- tamaño de letra 1
- Tamaño de letra: 0.63em

- tamaño de letra 2
- Tamaño de letra: 0.82em

- tamaño de letra 3
- Tamaño de fuente: 1.0em

- Tamaño de letra 4
- Tamaño de letra: 1.13em

- Tamaño de letra 5
- tamaño de letra: 1.5em

- Tamaño de letra 6
- Tamaño de fuente: 2em

- Tamaño de letra 7
- Tamaño de fuente: 3em

estas son aproximaciones basadas en las medidas em


<font size=1>- font size 1</font><br> <span style="font-size:0.63em">- font size: 0.63em</span><br> <font size=2>- font size 2</font><br> <span style="font-size: 0.82em">- font size: 0.82em</span><br> <font size=3>- font size 3</font><br> <span style="font-size: 1.0em">- font size: 1.0em</span><br> <font size=4>- font size 4</font><br> <span style="font-size: 1.13em">- font size: 1.13em</span><br> <font size=5>- font size 5</font><br> <span style="font-size: 1.5em">- font size: 1.5em</span><br> <font size=6>- font size 6</font><br> <span style="font-size: 2em">- font size: 2em</span><br> <font size=7>- font size 7</font><br> <span style="font-size: 3em">- font size: 3em</span><br>