En aquest tema, explorarem les diferents propietats de fonts que CSS ens ofereix per estilitzar el text en una pàgina web. Les propietats de fonts ens permeten controlar l'aparença del text, incloent-hi la família de fonts, la mida, l'estil, el pes i altres aspectes rellevants.
Índex
La propietat font-family especifica la família de fonts per al text. Es pot definir una llista de fonts alternatives, separades per comes, per assegurar-se que el text es mostri correctament si la primera font no està disponible.
Explicació
- "Arial": Primera opció de font.
- "Helvetica": Segona opció si "Arial" no està disponible.
- sans-serif: Tipus de font genèrica si cap de les anteriors està disponible.
La propietat font-size defineix la mida del text. Pot especificar-se en diverses unitats com píxels (px), em, rem, percentatges (%), etc.
Explicació
- 24px: Mida fixa de 24 píxels.
- 1.5em: Mida relativa a la mida de la font del seu element pare.
La propietat font-style s'utilitza per aplicar estils com cursiva al text.
Valors Comuns
- normal: Text normal.
- italic: Text en cursiva.
- oblique: Text inclinat.
La propietat font-weight defineix el gruix del text.
Valors Comuns
- normal: Pes normal (400).
- bold: Text en negreta (700).
- 100 - 900: Valors numèrics per definir el pes específic.
La propietat font-variant s'utilitza per mostrar el text en petites majúscules.
Valors Comuns
- normal: Text normal.
- small-caps: Text en petites majúscules.
La propietat font és una forma abreujada per establir diverses propietats de fonts en una sola declaració.
Explicació
- italic: Estil de la font.
- small-caps: Variant de la font.
- bold: Pes de la font.
- 16px/1.5: Mida de la font i altura de línia.
- "Arial", sans-serif: Família de fonts.
Exercicis Pràctics
Exercici 1: Aplicar Fonts
Crea un paràgraf amb el següent estil:
- Família de fonts: "Times New Roman", "Georgia", serif.
- Mida de la font: 18px.
- Estil de la font: cursiva.
- Pes de la font: 600.
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercici Fonts</title>
<style>
p {
font-family: "Times New Roman", "Georgia", serif;
font-size: 18px;
font-style: italic;
font-weight: 600;
}
</style>
</head>
<body>
<p>Aquest és un exemple de text amb estil de fonts aplicat.</p>
</body>
</html>Exercici 2: Utilitzar Font Shorthand
Crea un encapçalament amb el següent estil utilitzant la propietat font abreujada:
- Estil de la font: normal.
- Variant de la font: petites majúscules.
- Pes de la font: 700.
- Mida de la font: 24px.
- Altura de línia: 1.2.
- Família de fonts: "Verdana", sans-serif.
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercici Font Shorthand</title>
<style>
h1 {
font: normal small-caps 700 24px/1.2 "Verdana", sans-serif;
}
</style>
</head>
<body>
<h1>Exemple d'Encapçalament amb Font Shorthand</h1>
</body>
</html>Conclusió
En aquesta secció, hem après a utilitzar diverses propietats de fonts en CSS per estilitzar el text. Hem explorat com definir la família de fonts, la mida, l'estil, el pes i la variant del text. També hem vist com utilitzar la propietat abreujada font per simplificar el codi CSS. Amb aquests coneixements, ja pots començar a aplicar estils de fonts als teus projectes web.
Domini del CSS: De Principiant a Avançat
Mòdul 1: Introducció al CSS
- Què és el CSS?
- Sintaxi i Selectors de CSS
- Com Afegir CSS a HTML
- Propietats Bàsiques de CSS
- Colors en CSS
- Unitats i Mesures en CSS
Mòdul 2: Estilització de Text i Fonts
- Propietats de Text
- Propietats de Fonts
- Integració de Google Fonts
- Alineació i Espaiat de Text
- Decoració i Transformació de Text
Mòdul 3: Model de Caixa i Disseny
- Comprendre el Model de Caixa
- Marge i Farciment
- Vora i Contorn
- Amplada i Alçada
- Dimensionament de Caixa
- Propietat de Visualització de CSS
Mòdul 4: Posicionament i Flotació
- Propietat de Posició de CSS
- Posicionament Estàtic, Relatiu, Absolut i Fix
- Flotació i Neteja de CSS
- Crear Dissenys amb Flotació
- Índex Z de CSS
Mòdul 5: Flexbox
- Introducció a Flexbox
- Propietats del Contenidor Flex
- Propietats dels Elements Flex
- Crear Dissenys amb Flexbox
- Disseny Responsiu amb Flexbox
Mòdul 6: CSS Grid
- Introducció a CSS Grid
- Propietats del Contenidor Grid
- Propietats dels Elements Grid
- Crear Dissenys amb CSS Grid
- Disseny Responsiu amb CSS Grid
Mòdul 7: Tècniques Avançades de CSS
Mòdul 8: Disseny Responsiu
- Introducció al Disseny Responsiu
- Consultes de Mitjans
- Tipografia Responsiva
- Imatges Responsives
- Disseny Mobile-First
Mòdul 9: Preprocessadors i Frameworks
- Introducció als Preprocessadors de CSS
- Conceptes Bàsics de Sass
- Conceptes Bàsics de Less
- Introducció als Frameworks de CSS
- Ús de Bootstrap
Mòdul 10: Millors Pràctiques i Optimització
- Millors Pràctiques de CSS
- Organització del Codi CSS
- Minificació de CSS
- Optimització del Rendiment de CSS
- Depuració de CSS