Introducción a las propiedades de fuente CSS
CSS Font Properties proporciona un resumen de las propiedades de fuente de CSS. Cascading Style Sheets, más popularmente conocido como CSS, es un lenguaje de diseño fácil diseñado para simplificar el aspecto de las páginas web productoras. CSS se ocupa de la apariencia y la experiencia de una parte de una página web. Al aplicar CSS, puede controlar el color con el texto, el estilo de las fuentes, el espacio entre los párrafos, cómo se dimensionará y presentará las columnas, las imágenes de fondo o los colores que se utilizarán, los estilos de diseño, las variantes en la pantalla varios dispositivos, así como tamaños de pantalla, además de varios otros efectos. CSS es fácil de entender y comprender, sin embargo, proporciona un control efectivo de la demostración del documento HTML. Muy a menudo, CSS generalmente se combina con lenguajes de marcado HTML o simplemente XHTML.
- CSS se refiere a hojas de estilo en cascada.
- CSS identifica cómo deben mostrarse los elementos HTML en la pantalla, papel y también consisten en medios.
- CSS ahorrará mucho trabajo. Podría controlar el diseño de varias páginas web al mismo tiempo.
- Las hojas de estilo externas se guardarán en archivos CSS.
Explicar diferentes propiedades de fuente CSS
A continuación se muestran las diferentes propiedades de fuente CSS:
Colección de fuentes: en CSS puede seleccionar la fuente que desea usar para el texto dentro de un elemento en particular estableciendo la propiedad font-family en una regla de estilo, pero antes de entrar en detalles de font-family, tendremos que entender cómo usar nombres de fuente porque cuando creamos una página web no siempre sabemos qué usará nuestro usuario para ver la página web.
Definir las cinco categorías de fuentes en CSS de estándares
- La primera de estas categorías son las categorías de fuentes serif. Un ejemplo de una fuente específica que encajaría en esta categoría sería Times o Times New Roman, así como Baskerville, Century y Schoolbook
- Esos son nombres de fuentes específicos, como Baskerville, Century y Schoolbook; esos son los nombres de fuente que puede ver en una lista desplegable cuando selecciona una fuente dentro de un procesador de texto porque el procesador de texto sabe exactamente lo que está instalado en su máquina. Pero para CSS, todas estas fuentes caerían en la categoría de fuentes serif.
- También hay un conjunto de fuentes sans-serif y una fuente popular que pertenece a esta categoría es Arial. En caso de que no lo supiera, serif, por lo que hay pequeñas líneas al final de una carta, hacen que las letras se vean un poco elegantes y adornadas. Puedes ver la diferencia en las letras R que están debajo.
- La R a la izquierda es un Arial, que es sans-serif, literalmente sin los adornos, mientras que la R a la derecha es Times New Roman y contiene algunos pequeños trazos extra aquí y allá. En términos generales, las personas consideran que las fuentes sans-serif son más fáciles de leer en una pantalla LCD y LED.
- También hay categorías para las fuentes cursivas, que se parecen un poco a las letras escritas a mano y las fuentes de fantasía, que pueden parecer cualquier cosa, pero la mayoría de los diseños no van a hacer un uso intensivo de estas fuentes porque pueden ser difíciles de leer y también un poco impredecible.
- Finalmente, hay una categoría para fuentes monoespaciadas. Estas son las fuentes que dan el mismo espacio a cada letra y esa es probablemente la fuente que desea usar en su editor de texto que usa para crear CSS y también la fuente que desea usar en una página web para mostrar el código en un página web.
Resultados en el navegador web:
Salida:
Resultados en el navegador web:
Salida:
Resultados en el navegador web:
Salida:
Resultados en el navegador web:
Salida:
Resultados en el navegador web:
Salida:
Familias de fuentes
Debajo de la explicación se muestran las familias de fuentes:
- Muchos diseños CSS configurarán la propiedad de la familia de fuentes con el nombre de una fuente específica como Arial. Sin embargo, siempre existe la posibilidad de que la fuente específica que desea, como Arial, no esté disponible en el sistema de un usuario determinado. Y esa es una de las razones por las que puede especificar tantas fuentes como desee en una lista delimitada por comas y el navegador usará la primera que coincida.
De acuerdo con la captura de pantalla anterior, tenemos la primera opción, una segunda opción y si ninguna de esas fuentes está disponible, recurriremos al sans-serif genérico porque incluso si el navegador no tiene ninguna de las otras fuentes, debe proporcionar una fuente predeterminada para esa categoría. Por supuesto, eso plantea la pregunta de qué fuentes son seguras de usar para el diseño web. En términos generales, no puede equivocarse con Arial, Verdana, Times y Courier, pero también hemos proporcionado una lista aquí de otras fuentes que están comúnmente disponibles en múltiples plataformas.
- Helvetica es una fuente común que está viendo en muchas hojas de estilo, pero Helvetica no está disponible en Windows. Windows proporciona Arial en su lugar.
- Font-family es una de esas propiedades que se hereda. Entonces, si lo configuramos en el nivel del cuerpo, entonces los párrafos y los divs y los anclajes que están dentro de ese cuerpo recogerán esa familia de fuentes por defecto a menos que la anulemos. Entonces, por ejemplo, este encabezado aquí, esta etiqueta h1, hereda la familia de fuentes del cuerpo, pero no tiene por qué ser así.
Salida:
Podemos decir que para el h1 la familia de fuentes debería ser Times New Roman, Serif y si actualiza las páginas web, el cambio se ha reflejado.
Tamaño de fuente y estilos
Debajo de la información detallada sobre el tamaño de fuente y estilos:
- Otra característica de las fuentes que querrá controlar es el tamaño y al configurar el tamaño primero tendrá que elegir entre unidades absolutas o relativas.
- Los tamaños absolutos se especifican comúnmente en píxeles y los píxeles le dan un control muy preciso sobre el tamaño de fuente.
- Las unidades relativas, como los porcentajes o las palabras clave más grandes o más pequeñas o ems, le permiten establecer un tamaño de fuente basado en alguna línea base, por lo que 2em sería el doble del tamaño de la línea base y 0. 8em sería el 80% de la línea base. Muchas personas hoy usan ems para el tamaño relativo de la fuente. Una razón es que los tamaños relativos permiten a un usuario escalar el texto usando su navegador y esto es algo que puede querer hacer porque el texto es difícil de ver para ellos. Los tamaños relativos permiten que eso funcione.
Resultados en el navegador web:
Salida:
- Algunas de las otras propiedades de una fuente que puede establecer son el estilo de fuente para forzar la fuente en cursiva o el peso de la fuente para poner una fuente en negrita. Y la propiedad de variante de fuente traerá una tipografía que usa solo letras mayúsculas.
Resultados en el navegador web:
Salida:
- Lo primero que queremos hacer es enfatizar un poco ese elemento h1. Debe ser un elemento h1 porque es el encabezado principal de esta página, pero es un poco demasiado grande para nuestro punto de vista. Permítanme establecer el tamaño de fuente en 1.2ems. Eso lo reducirá un poco porque, por lo general, una etiqueta h1 va a superar los 1, 2 ems. El siguiente problema que queremos abordar es la lista de códigos aquí. Queremos que sea una fuente monoespacial y hay un par de deseos diferentes para lograrlo. Para el código según a continuación.
Resultados en el navegador web:
Salida:
Resultados en el navegador web:
Salida:
Aquí queremos usar la etiqueta previa, lo que significa que es texto preformateado y no intente manipularlo.
Resultados en el navegador web:
Salida:
Son las propiedades abreviadas del estilo de fuente. Como el estilo de letra cursiva, el tamaño de fuente 0.9em y el tipo de letra serif familiar;
Resultados en el navegador web:
Salida:
Conclusión
Cómo especificar fuentes usando CSS y la diferencia entre una fuente específica como Arial y las categorías genéricas de fuentes web como serif y sans-serif. También gestionamos el tamaño de fuente y los pros y los contras de los tamaños relativos frente a los tamaños absolutos, finalmente, utilizamos las propiedades de fuente y aprendemos a cargar fuentes con la familia de fuentes.
Artículos recomendados
Esta ha sido una guía para las propiedades de fuente CSS. Aquí hemos discutido diferentes propiedades de fuente CSS y cinco categorías de fuentes en CSS estándar con resultados y resultados del navegador. También puede consultar nuestro otro artículo sugerido para obtener más información.
- ¿Qué es el CSS?
- Introducción a CSS
- Carrera en CSS
- Ventajas de CSS