Fuentes CSS
Familias genéricas de fuentes en CSS
Hay cinco tipos de familias de fuentes en CSS I.mi. Serif, sans-serif, monoespace, fantasía y cursiva. Todas estas familias de fuentes se utilizan para especificar la apariencia/forma de las fuentes:
- Fuentes serif tener pequeños trazos elegantes en el borde de las letras
- Sans-serif Las fuentes tienen letras simples, sin accidente cerebrovascular. Estas fuentes son fácilmente legibles.
- Monos Las fuentes son letreros de agua fija, de ancho fijo. Se usa principalmente para representar el código de programación
- Cursivo Las fuentes son muy similares a la escritura humana
- Fantasía Las fuentes tienen un aspecto decorativo/elegante
Diferencia visual de familias genéricas de fuentes
El siguiente fragmento proporcionará una guía para comprender la diferencia de formas de las familias de fuentes genéricas
Varios tipos de familias de fuentes genéricas
La figura de abajo dada presenta los diferentes tipos de cada familia de fuentes genéricos:
Propiedades de fuente CSS
En CSS, la apariencia del texto se puede modificar de múltiples maneras, como seleccionar el estilo de fuente, la familia de fuentes, el color de fuente, el tamaño de la fuente, etc. Como el uso correcto de la fuente tiene un gran impacto en el texto y la experiencia del lector, por lo tanto, CSS proporciona numerosas propiedades de fuentes que pueden usarse para personalizar el aspecto de las fuentes. Esta redacción se dirigirá a las siguientes propiedades de fuente:
- Familia tipográfica
- Estilo de fuente
- variante
- tamaño de fuente
- pescado
- fuga taquigrafía
Comencemos con la familia de fuentes.
Familia de fuentes CSS
Esta propiedad se utiliza para especificar la familia de fuentes para cualquier elemento HTML e.gramo. "Arial", "Times New Roman", etc. O podemos usar una familia de fuentes genéricos e.gramo. Serif, cursiva, etc.
Ejemplo
El ejemplo de la siguiente manera utiliza las fuentes serif para el
elemento y fuentes cursivas para el
elementos:
Html
Fuentes CSS
Primer párrafo
Segundo parrafo
CSS
H3Font-Family: 'Times New Roman', Times, serif;
pags
Font-Family: cursiva;
La pieza de código anterior muestra la siguiente salida:
Estilo de fuente CSS
Para definir un estilo específico para un elemento HTML, se utiliza la propiedad estilo fuente. La propiedad de estilo fuente puede tener un valor normal, oblicuo o en cursiva.
Ejemplo
En la siguiente pieza de código, el estilo de fuente de
El elemento se cambia a estilo cursiva:
Html
Fuentes CSS
Primer párrafo
Segundo parrafo
CSS
H3estilo de fuente: cursiva;
El fragmento anterior muestra el siguiente resultado:
El oblicuo, los valores normales se pueden usar para la propiedad de estilo fuente, el valor oblicuo producirá resultados muy similares al estilo cursiva.
Variante de la fuente CSS
Puede tomar un valor "Capas pequeñas" que convierte las letras en letras mayúsculas (mayúsculas pero más pequeñas).
Ejemplo
El código dado a continuación demostrará el efecto de la propiedad variante de fuente en el
elemento:
Html
Fuentes CSS
Primer párrafo
Segundo parrafo
CSS
pagsFont-Variant: pequeños captillas;
El código anterior proporcionará el siguiente resultado:
Tamaño de fuente CSS
La propiedad del tamaño de la fuente se analiza para establecer el tamaño del texto y el valor para el tamaño de la fuente se puede especificar como pequeño, grande, mediano, etc., o en términos de PX, EM, %, etc.
El código dado a continuación especifica el tamaño de fuente para el
Elemento como extra grande:
Html
Fuentes CSS
Primer párrafo
Segundo parrafo
CSS
pagstamaño de fuente: X-Large;
El fragmento anterior genera el siguiente resultado:
La salida verifica que el texto de
Los elementos son más grandes que el tamaño de fuente normal.
Pescado css
La propiedad Font-Weight se usa para establecer el peso de la fuente en términos de algunos valores específicos como Bold, Normal, Lighter, etc. Puede determinar el peso en términos de un valor numérico como 100, 200, 300, etc. El valor mayor especifica una fuente más audaz/más gruesa, mientras que el valor más pequeño representa una fuente más delgada.
La siguiente pieza de código establece Font-Weight para el
elemento usando el valor "más audaz":
Html
Fuentes CSS
Primer párrafo
Segundo parrafo
CSS
pagsFont-peso: más audaz;
El fragmento anterior produce la siguiente salida:
Propiedad taquigrafía de fuentes en CSS
CSS proporciona una propiedad en taquigrafía para todas las propiedades mencionadas anteriormente. Usando taquigrafía "fuente" Propiedad podemos establecer el estilo de fuente, la familia, la variante, etc. en una sola línea.
El ejemplo a continuación demuestra cómo usar la propiedad de Font Sporthand en CSS:
Html
Fuentes CSS
Primer párrafo
Segundo parrafo
CSS
pagsFont: Bold 30px cursiva;
El fragmento anterior especifica el peso de la fuente, el tamaño de la fuente y la familia de fuentes en una declaración utilizando la propiedad de la corta de fuentes:
La salida anterior verifica que la propiedad abreviada establece con éxito el peso de la fuente, el tamaño y la familia para el
elemento.
Conclusión
Las familias de fuentes determinan la forma de las fuentes, mientras que las propiedades de estilo de fuente, peso de fuente, tamaño de fuente y variante de fuente determinan el estilo, el peso, el tamaño y las pequeñas capas de las fuentes respectivamente. Todas estas funcionalidades se pueden realizar en las fuentes en una sola declaración utilizando la propiedad "fuente".
Este artículo presenta una descripción completa de las fuentes CSS, las familias de fuentes genéricas y cómo establecer el estilo de la fuente.