Comprensión y Uso de las Propiedades de Fuente
Consideremos las propiedades más comunes relacionadas con las fuentes.
selector {
font-family: 'Montserrat' | 'Oswald' | 'Lato' |...; /* any font family */
font-size: 12px | 0.5em | 0.8rem |...; /* it can be any value in px/em/rem units */
font-weight: 400 | 500 | 700 | 900 |...; /* value 100 - 900 */
font-style: normal | italic | oblique; /* only these values available */
}
Nota
Todos los ejemplos se mostrarán utilizando el mismo contenido de texto para ofrecer la oportunidad de observar cómo el mismo texto puede visualizarse de manera diferente.
font-family
La propiedad font-family define la familia o familias tipográficas que se utilizarán para mostrar el contenido de texto. Es posible especificar un solo nombre de familia tipográfica o una lista de varios nombres de familias separados por comas.
font-size
La propiedad font-size establece el tamaño de la fuente para mostrar el contenido de texto. Puede ser un tamaño fijo medido en px o un tamaño relativo medido en unidades em o rem.
font-weight
La propiedad font-weight determina el grosor o peso de la fuente utilizada para mostrar el contenido de texto. Puede especificarse como un valor numérico (por ejemplo, 300, 500, 700, ...) o como una palabra clave (por ejemplo, lighter, normal o bold).
font-style
La propiedad font-style especifica el estilo de la fuente que se utilizará para el contenido de texto. Puede ser normal (el valor predeterminado), italic u oblique.
Pseudoclase ::first-letter
La pseudoclase first-letter selecciona y aplica estilos a la primera letra de un párrafo o encabezado. Para utilizar esta pseudoclase, se deben colocar dos puntos dobles :: después de un selector y añadir la palabra clave first-letter.
selector::first-letter {
/* some styles */
}
Ejecuta el siguiente ejemplo para observar su funcionamiento.
index.html
styles.css
Resumen
font-familyespecifica la fuente o fuentes alternativas para el texto. Se pueden listar varias fuentes para asegurar una correcta visualización;font-sizedefine el tamaño del texto utilizando unidades absolutas (px) o relativas (em, rem);font-weightcontrola el grosor de la fuente, ya sea numéricamente (100–900) o mediante palabras clave comonormalobold;font-styledetermina el estilo de la fuente, comonormal,italicuoblique;- La pseudoclase
::first-letterselecciona y aplica estilos a la primera letra de un bloque de texto, permitiendo efectos tipográficos creativos.
1. ¿Qué propiedad determina el grosor de la fuente?
2. ¿Cuál es el valor predeterminado de la propiedad font-style en CSS?
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Can you explain the difference between px, em, and rem units for font-size?
How do I choose the best font-family for my website?
Can you show examples of using the ::first-letter pseudo-class?
Awesome!
Completion rate improved to 2.56Comprensión y Uso de las Propiedades de Fuente
Desliza para mostrar el menú
Consideremos las propiedades más comunes relacionadas con las fuentes.
selector {
font-family: 'Montserrat' | 'Oswald' | 'Lato' |...; /* any font family */
font-size: 12px | 0.5em | 0.8rem |...; /* it can be any value in px/em/rem units */
font-weight: 400 | 500 | 700 | 900 |...; /* value 100 - 900 */
font-style: normal | italic | oblique; /* only these values available */
}
Nota
Todos los ejemplos se mostrarán utilizando el mismo contenido de texto para ofrecer la oportunidad de observar cómo el mismo texto puede visualizarse de manera diferente.
font-family
La propiedad font-family define la familia o familias tipográficas que se utilizarán para mostrar el contenido de texto. Es posible especificar un solo nombre de familia tipográfica o una lista de varios nombres de familias separados por comas.
font-size
La propiedad font-size establece el tamaño de la fuente para mostrar el contenido de texto. Puede ser un tamaño fijo medido en px o un tamaño relativo medido en unidades em o rem.
font-weight
La propiedad font-weight determina el grosor o peso de la fuente utilizada para mostrar el contenido de texto. Puede especificarse como un valor numérico (por ejemplo, 300, 500, 700, ...) o como una palabra clave (por ejemplo, lighter, normal o bold).
font-style
La propiedad font-style especifica el estilo de la fuente que se utilizará para el contenido de texto. Puede ser normal (el valor predeterminado), italic u oblique.
Pseudoclase ::first-letter
La pseudoclase first-letter selecciona y aplica estilos a la primera letra de un párrafo o encabezado. Para utilizar esta pseudoclase, se deben colocar dos puntos dobles :: después de un selector y añadir la palabra clave first-letter.
selector::first-letter {
/* some styles */
}
Ejecuta el siguiente ejemplo para observar su funcionamiento.
index.html
styles.css
Resumen
font-familyespecifica la fuente o fuentes alternativas para el texto. Se pueden listar varias fuentes para asegurar una correcta visualización;font-sizedefine el tamaño del texto utilizando unidades absolutas (px) o relativas (em, rem);font-weightcontrola el grosor de la fuente, ya sea numéricamente (100–900) o mediante palabras clave comonormalobold;font-styledetermina el estilo de la fuente, comonormal,italicuoblique;- La pseudoclase
::first-letterselecciona y aplica estilos a la primera letra de un bloque de texto, permitiendo efectos tipográficos creativos.
1. ¿Qué propiedad determina el grosor de la fuente?
2. ¿Cuál es el valor predeterminado de la propiedad font-style en CSS?
¡Gracias por tus comentarios!
