Tamaño de fuente HTML tamaño relativo. Tamaño de fuente responsivo. Configurar el tamaño de fuente usando HTML
Encabezamientos
Para
Las etiquetas se utilizan para diseñar encabezados.
...
Creo que todo el mundo entiende esto, no es difícil.Siguiente
Tipo de letra (tipo) y color de fuente
Creo que todo el mundo entiende esto, no es difícil.Siguiente
Tipo de letra (tipo) y color de fuente
Hay dos maneras aquí. El segundo se describirá más adelante. Primero: se utiliza una etiqueta
Con atributos rostro Y color, respectivamente:
fuente Verdana
fuente Verdana
fuente roja
fuente roja
Fuente de color MidnightBlue
Fuente de color MidnightBlue
Fuente de color MidnightBlue
Fuente de color MidnightBlue
Un color tiene un nombre y un valor numérico, como se ve en este ejemplo.
(Azul Medianoche=#191970). Puedes escribir mucho sobre flores, pero yo
Me centraré en un enlace:
Selección de colores. Los colores web-safe y web-smart son adecuados para su uso.
Dar formato al texto: usar una etiqueta y atributo estilo (1)
Etiqueta se refiere a un fragmento de texto seleccionado (formateado): Y Se aplica a Registro Color de fuente El color de fuente se puede configurar mediante una etiqueta. , como se discutió anteriormente. Ahora usemos la etiqueta y atributo estilo: fuente roja - fuente roja De la misma manera, puede configurar valores de color digitales (para más detalles, consulte arriba). Tipo de letra (tipo) de fuente Acerca de la forma de configurar el tipo de letra (tipo) de una fuente usando una etiqueta Esto también se discutió la última vez. Ahora veamos el segundo método: usar la construcción. fuente
En su lugar ***
Fuente Verdana Fuente Times Tamaño de fuente Para especificar el tamaño de fuente, se utiliza la construcción. fuente
Tamaño xx-grande, x-grande, grande, mediano, pequeño, x-pequeño, xx-pequeño. Resultado: fuente muy muy grande Puede especificar el tamaño de fuente de la forma habitual en Word: en puntos (pt). 1 punto equivale a 1⁄72 pulgadas. Ejemplos: 12 puntos 36 puntos Los valores 12pt, 36pt en estos ejemplos se sustituyen en lugar de *** en formula general fuente
. También puedes usar píxeles: fuente 12px Las dimensiones anteriores son absolutas. Pero el tamaño de fuente también se puede establecer de forma relativa, como porcentaje: tamaño de fuente 1,5 em del original Peso de fuente (saturación) Esto es algo que se puede especificar usando una etiqueta simple. miniatura Mediante el uso esto se hace así: fuente en negrita negrita La ventaja de este método es que, junto con el valor del peso de la fuente atrevido También se pueden utilizar valores. más audaz y más ligero, obteniendo una fuente de “diferentes pesos” (en en este caso estamos hablando de valores relativos). Y el valor predeterminado es normal- fuente normal. Estilo de fuente Las cursivas se pueden obtener usando la etiqueta , y de la siguiente manera: cursiva Capital Esta propiedad se lee/escribe para todos los objetos excepto currentStyle (solo lectura). La propiedad tiene un valor predeterminado de medio. Atributo Mesas en cascada Los estilos (CSS) se heredan. Estas expresiones se pueden utilizar en explorador de Internet, a partir de IE5. En IE6, al declarar! DOCTYPE para indicar un modo compatible con el estándar, el valor predeterminado para de esta propiedad toma el valor pequeño, no mediano. Uso prohibido valores negativos. Los tamaños de fuente especificados en unidades proporcionales "em" adquieren un valor basado en el tamaño de fuente del objeto principal. Valores posibles longitud indicado en unidades relativas según la altura de fuente del elemento (em) o la altura del carácter "x" (ex). En los ejemplos, el atributo se utiliza para cambiar las características de la fuente. tamaño de fuente y propiedad tamaño de fuente. En el siguiente ejemplo, varios párrafos están configurados para diferentes significados tamaño de fuente.
El siguiente ejemplo analiza cómo configurar el tamaño de fuente en 14 cuando ocurre el evento onmouseover.
Etiqueta disminuye el tamaño de fuente en uno en comparación con en texto plano. EN Tamaño HTML La fuente se mide en unidades arbitrarias del 1 al 7, el tamaño de texto promedio utilizado de forma predeterminada es 3. Por lo tanto, agregar una etiqueta Reduce el texto en una unidad convencional. Se permiten etiquetas anidadas , y el tamaño de fuente será menor con cada nivel anidado, pero no puede ser menor que 1. El tamaño de fuente se ve afectado no sólo por el especificado atributo de tamaño etiqueta , pero también la elección del tipo de letra. Arial parece más grande que Times y Verdana parece ligeramente más grande que Times. más fuente Arial. Tenga en cuenta esta característica a la hora de elegir una fuente y su tamaño. Para un control más preciso del tamaño del texto, utilice estilos. Requerido. HTML 4.01 IE Cr Op Sa Fx
Gato grande De la familia de los gatos, el gato más grande no lo es en absoluto. un leon, como podría pensarse a partir del título de “rey de las bestias”. Y el tigre Ussuri, cuyo peso alcanza los 300 kilogramos. El tigre es inferior en tamaños Y peso sólo a otro depredador terrestre, el oso polar. Resultado este ejemplo mostrado en la Fig. 1. Arroz. 1. Tipo de texto formateado mediante una etiqueta HTML5 IE Cr Op Sa Fx
Estoy seguro de que nadie necesita explicar por qué los sitios web deberían ser flexibles y adaptables. Todo el mundo utiliza porcentajes y consultas de medios en su diseño. Ahora bien, esto ya es un estándar. Pero hasta hace poco la tipografía no era tan flexible. Todo lo que pudimos hacer fue cambiar los tamaños de fuente de un punto de interrupción a otro. En este caso, terminamos con una tipografía adaptativa en lugar de responsiva. Para cada consulta de medios debe establecer sus propios valores. Por supuesto, puede utilizar un enfoque de componentes con tamaños de fuente relativos, lo que puede acelerar significativamente el proceso de edición, pero esto no cambia nada fundamentalmente. Al mover un componente a otra ubicación, deberá ejecutar todas las consultas de medios nuevamente y sustituir nuevos valores. Pero entonces aparecieron... VW, vh, vmin, vmáx- unidades de medida basadas en la ventana gráfica. Tenemos la oportunidad de lograr una tipografía responsiva. 100vw igual al ancho ( 100vh- altura) de la pantalla en píxeles (o se convertirá a otros valores si se usa en calcular()). 100vmáx.- igual al mayor del par alto/ancho, 100vmín.- a menos. Inmediatamente comenzaron a aparecer recetas para utilizar estas cantidades milagrosas en tipografía. Pero de esta forma son difíciles de controlar. A veces me encontré con recetas que utilizaban porcentajes mágicos. Pero no estaba contento con la opción de averiguar de dónde venían y luego contarlos o seleccionarlos manualmente para obtener los tamaños que necesitaba en mis condiciones. Quería tener una receta universal que me permitiera establecer los valores mínimo y máximo para el tamaño de fuente, y también vincular estos números a tamaños de ventana gráfica específicos. Por ejemplo, con un ancho de pantalla de 480px tener exactamente 16px, y cuando 1280px - 24px. Recordando el curso de matemáticas de la escuela, llegué a la conclusión de que mi problema no es más que la ecuación de una línea recta que pasa por 2 puntos. El primer punto es más pequeño que el ancho de la pantalla y el tamaño de fuente, el segundo es más grande que el ancho y el tamaño de fuente correspondiente. En eje X- ancho de la ventana del navegador, en el eje Y- nuestro tamaño de fuente. Obtenemos una ecuación con dos incógnitas: y- nuestro tamaño de fuente desconocido, X- tamaño de pantalla actual. x1 - valor mínimo fuente, x2- valor máximo de fuente. y 1 Y y 2 valores mínimo y máximo de ancho de pantalla, respectivamente. Y ahora lo más interesante: tener función CSS calcular() y el valor actual de la ventana gráfica gracias a VW disponible tamaño dinámico fuente: Esta fórmula ya se puede utilizar en CSS puro. Sólo necesita recordar que para las operaciones de multiplicación/división al menos uno de los argumentos debe ser sin unidades, y para la suma/resta, ambos con unidades. Sustituyendo nuestros valores, obtenemos una versión funcional (tenga en cuenta el uso de unidades): Puedes utilizar cualquier unidad de medida, siempre que coincidan. Lo mismo, solo que en movimiento rápido del ojo: Con una herramienta como Sass a mano, puedes mayoría los cálculos se ocultan del navegador. Impares k Y b Se puede obtener de la ecuación de una recta en dos puntos: Obtenemos la función: En caso de que queramos poder utilizar no sólo píxeles pero también otras unidades de medida, puedes transferirlas usando uno de los parámetros: Para protegerse contra datos ingresados incorrectamente, puede recortar las unidades de medida al recibir datos. Para hacer esto, puedes usar la función strip-unit o tomarla de la biblioteca de bourbon: Tenemos una función para calcular el tamaño de fuente. Ahora, basándose en él, puedes crear un mixin que se puede ampliar a tu gusto. Por ejemplo, queremos una alternativa para navegadores más antiguos: Ahora puedes transmitir como alternativa tamaño óptimo fuente en caso VW No soportado. Puede limitar los tamaños de fuente a nuestro mínimo y/o valor máximo: Ahora con un ancho de pantalla más pequeño 480px la fuente siempre estará ahí 16px, después 480
se volverá gomoso y luego 1280px siempre será 24px. Tenemos Función básica, que realiza todas las funciones principales: Para ampliarlo se utilizaron mixins, con los que se pueden crear respaldos, restricciones, conversión de unidades y mucho más. Puedes jugar con todo esto en codepen. Si no desea utilizar Sass, encontrará una manera de realizar cálculos utilizando CSS puro. El tamaño de fuente en el sitio se puede configurar usando HTML y CSS. Consideremos ambas opciones. El tamaño de fuente en la página se puede determinar usando la etiqueta fuente HTML. En el artículo ya miramos la etiqueta. fuente y sus atributos. Uno de los atributos de esta etiqueta es tamaño, que le permite configurar el tamaño de fuente. Se aplica de la siguiente manera: Creador de sitios web<tamaño de fuente="7">"Nubex"
Tamaño Puede tomar valores del 1 al 7 (el valor predeterminado es 3, que corresponde a 13,5 puntos para la fuente Times New Roman). Otra opción para especificar el atributo es “+1” o “-1”. Esto significa que el tamaño cambiará con respecto a la base en 1 punto más o menos, respectivamente. Este método es bastante fácil de usar y es indispensable si necesita cambiar el tamaño de fuente de un pequeño fragmento de texto. De lo contrario, se recomienda aplicar estilo al texto utilizando CSS. En CSS, puedes cambiar el tamaño de fuente usando la propiedad tamaño de fuente, que se aplica de la siguiente manera:
En el siguiente ejemplo, el tamaño de fuente se establece en píxeles. Pero hay otras formas de establecer el tamaño:
(propiedades) trabajando con la etiqueta , también se puede utilizar con
etiquetas
párrafo, que no siempre nos conviene (aunque al formatear un párrafo
es racional usarlo). Etiqueta
así como - Es más una cuestión de gustos. el tiene mas
amplia gama de aplicaciones y tiene una serie de características adicionales.
Pero esto ya no se aplica al formato de texto. Por lo tanto para
centrémonos en la certeza .
El texto carece de significado en sí mismo.
Etiqueta destinado a ser atribuido al texto
cualquier propiedad. Estos son los que ahora intentaré enumerar
en un orden más o menos lógico.
es necesario sustituir el tipo de letra (tipo) de la fuente. Por regla general, sustituyen
el nombre no es una fuente específica, sino toda una familia de fuentes, por ejemplo, Verdana, tiempos etc. Obtenemos:
se puede especificar la fuente diferentes caminos. Quizás lo más obvio y
simple: sustituya uno de los siguientes siete valores en lugar de ***:
fuente muy grande
letra grande
fuente mediana
fuente pequeña
fuente muy pequeña
fuente muy muy pequeña
fuente 36px
tamaño de fuente 150% del original
o en relación con el ancho de la letra "m" en la fuente original (la unidad de medida correspondiente se llama ellos):
tamaño de fuente 1,5 em del original
miniatura
cursiva
En lugar de estilo de fuente: cursiva puedes escribir estilo de fuente: oblicuo, y luego el resultado no debe ser cursiva, sino una fuente oblicua (“angular”). Pero esto no siempre funciona. Valores utilizados
tamaño Línea, que establece o toma uno de los siguientes valores. tamaño absoluto
Equipo palabras clave, que indica un tamaño de fuente prescrito específico. Tamaños especificados Las fuentes son consistentes con la configuración preferida del usuario. Los valores utilizados incluyen los siguientes: xx-pequeño, x-pequeño, pequeño, mediano, grande, x-grande, xx-grande.
tamano relativo
Un conjunto de palabras clave que indican que el tamaño de fuente depende del valor del objeto principal. Los valores utilizados incluyen: mayor, menor.
longitud
Un número real que se puede especificar en unidades de medida absolutas (cm, mm, in, pt, pc) o relativas (em, ex, px). Más información detallada Puedes ver estas unidades en
porcentaje
Un número entero, medido como porcentaje (%). Muestra el valor como porcentaje del tamaño de fuente del objeto principal.
Notas
Ejemplos
Descripción
Sintaxis
Texto
etiqueta de cierre
Atributos
Similar a CSS
Brevemente sobre las unidades dependientes de la ventana gráfica
Tarea
Camino a la solución
tamaño de fuente: calc((100vw - Vmin)/(Vmax - Vmin) * (Fmax - Fmin) + Fmin);
tamaño de fuente: calc((100vw - 480px)/(1280 - 480) * (24 - 16) + 16px);
tamaño de fuente: calc((100vw - 30rem)/(80 - 30) * (1,5 - 1) + 1rem); Usando Sass/SCSS
La siguiente ecuación en línea recta es más adecuada para esto:
@function calcFluidFontSize($f-min, $f-max, $v-min, $v-max) ( $k: ($f-max - $f-min)/($v-max - $v-min ; $b: $f-min - $k * $v-min; $b: $b * 1px; @return calc(#($k) * 100vw + #($b)); tamaño: calcFluidFontSize(16, 48, 480, 1280);
@function calcFluidFontSize($f-min, $f-max, $v-min, $v-max, $unidades: px) ( $k: ($f-max - $f-min)/($v-max - $v-min; $b: $f-min - $k * $v-min; $b: $b + $unidades;#($k) * 100vw + #($b)) ) .fluid-font-size (tamaño de fuente: calcFluidFontSize(1, 3, 30, 80, rem); )
@function strip-unit($número) ( @if tipo-de($número) == "número" y no sin unidad($número) ( @return $número / ($número * 0 + 1); ) @return $ número; ) @function calcFluidFontSize($f-min, $f-max, $w-min, $w-max, $units: px) ( $f-min: strip-unit($f-min); $f -max: unidad de extracción ($f-max); $w-min: unidad de extracción ($w-min); $w-max: unidad de extracción ($w-max); /($w-max - $w-min); $b: $f-min - $k * $w-min; $b + $unidades ($k) * 100vw + #($b) ); Ampliando las capacidades de nuestra función.
@mixin fluidFontSize($f-min, $f-max, $w-min, $w-max, $fallback: false) ( @if ($fallback) ( tamaño de fuente: $fallback; ) tamaño de fuente: calcFluidFontSize ($f-min, $f-max, $w-min, $w-max, px.tamaño de fuente fluida ( @include fluidFontSize(16px, 24px, 480px, 1280px, 18px); )
@mixin fluidFontSize($f-min, $f-max, $w-min, $w-max, $fallback: false) (tamaño de fuente: $f-min; @media (ancho mínimo: $w-min ) ( @if ($fallback) ( tamaño de fuente: $fallback; ) tamaño de fuente: calcFluidFontSize($f-min, $f-max, $w-min, $w-max, px); ) @media ( ancho mínimo: $w-max) ( tamaño de fuente: $f-max; ) .fluid-font-size ( @include fluidFontSize(16px, 24px, 480px, 1280px, 18px); ) Resultado
@function calcFluidFontSize($f-min, $f-max, $w-min, $w-max, $units: px) ( $f-min: strip-unit($f-min); $f-max: unidad de tira($f-max); $w-min: unidad de tira($w-min; $w-max: unidad de tira($w-max); $k: ($f-max - $); f-min)/($w-max - $w-min); $b: $f-min - $k * $w-min; $b + $unidades; ) * 100vw + #($b)); Configurar el tamaño de fuente usando HTML
Configurar el tamaño de fuente usando CSS
