Learning the Web

Text fonamental i estil de font

This translation is incomplete. Please help translate this article from English.

En aquest article t'iniciem en el teu viatge cap al domini de l'estil de text amb CSS. Aquí passarem per tots els fonaments bàsics de l'estil de text/font detalladament, incloent l'establiment  del pes de la font, la família i l'estil, l'abreviatura de font, l'alineació del text i altres efectes, i l'espaiat de línia i lletra.

Requisits previs : Coneixements bàsics d'informàtica , els fonaments d'HTML (estudi Introducció a HTML ), fonaments CSS (estudi Introducció a CSS).
Objectiu: Aprendre les propietats i tècniques fonamentals necessàries per a l'estil del text a les pàgines web.

Què implica l'estil de text en CSS?

Com ja haureu experimentat en el vostre treball amb HTML i CSS, el text dins d'un element es defineix dins de la caixa de contingut de l'element. Comença a la part superior esquerra de l'àrea de contingut (o a la part superior dreta, en el cas del contingut de l'idioma RTL) i flueix cap al final de la línia. Una vegada que arriba al final, baixa a la línia següent i continua, després la següent línia, fins que tot el contingut s'ha col·locat a la caixa. El contingut de text es comporta de manera efectiva com una sèrie d'elements en línia, es distribueix en línies adjacents entre si, i no crea salts de línia fins que s'aconsegueix el final de la línia o, tret que s'obligui a un salt de línia manualment amb l'element <br>.

Nota: Si el paràgraf anterior us ha deixat confosos, no importa - torneu enrere i reviseu el nostre article de model de caixa per tal de fer un repàs de la teoria del model de caixa abans de continuar.

Les propietats CSS que s'utilitzen per escriure text generalment es divideixen en dues categories, que veurem per separat en aquest article:

  • Estils de font: propietats que afecten el tipus de font que s'aplica al text, que afecta el tipus de font que s'aplica, el gran que és, ja sigui en negreta, cursiva, etc.
  • Estils de disseny de text: propietats que afecten l'espaiat i altres funcions de disseny del text, que permeten la manipulació de, per exemple, l'espai entre línies i lletres, i com s'alinea el text dins de la caixa de contingut.

Nota: Tingueu en compte que el text dins d'un element es veu afectat com una única entitat. No podeu seleccionar i modificar l'estil de les subseccions de text a menys que les envolteu en un element apropiat (com ara <span> o <strong>) o utilitzeu un text, amb un pseudo-element específic com ::first-letter (selecciona la primera lletra del text d'un element), ::first-line (selecciona la primera línia del text d'un element), o ::selection (selecciona el text actualment ressaltat pel cursor).

Fonts

Anem a seguir endavant per veure les propietats d'estil de fonts. En aquest exemple aplicarem algunes propietats CSS diferents a la mateixa mostra HTML, que té el següent aspecte:

<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat 
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban 
predator — Tommy the cat had many a story to tell. But it was a rare 
occasion such as this that he did.</p>

Podeu trobar l'exemple acabat en Github (vegeu també el codi font).

Color

La propietat color estableix el color del contingut de primer pla dels elements seleccionats (que normalment és el text, però també pot incloure un parell d'altres coses, com ara un subratllat o una superposició en el text que utilitza la propietat text-decoration).

color pot acceptar qualsevol unitat de color CSS, per exemple:

p {
  color: red;
}

Això farà que els paràgrafs es converteixin en vermells, en comptes del negre estàndard per defecte del navegador, així:

Families de fonts

Per establir una font diferent al vostre text, utilitzeu la propietat font-family, això us permet especificar una font (o llista de fonts) perquè el navegador l'apliqui als elements seleccionats. El navegador només aplicarà un tipus de font si està disponible a la màquina a on accedeix al lloc web; Si no, només usarà un font predeterminada del navegador. Un exemple senzill és el següent:

p {
  font-family: arial;
}

Això farà que tots els paràgrafs d'una pàgina adoptin la font arial, que es troba a qualsevol ordinador.

Fonts web segures

Parlant de la disponibilitat de fonts, només hi ha una certa quantitat de fonts que, generalment, es troben disponibles en tots els sistemes i, per tant, es poden utilitzar sense molta preocupació. Aquestes són les anomenades fonts web segures.

La majoria de les vegades, com a desenvolupadors web, volem tenir un control més específic sobre les fonts utilitzades per mostrar el contingut del text. El problema és trobar una manera de saber quina font està disponible a l'ordinador utilitzat per veure les nostres pàgines web. No hi ha manera de saber-ho en tots els casos, però se sap que les fonts de seguretat web estan disponibles en gairebé totes les instàncies dels sistemes operatius més utilitzats (Windows, Mac, les distribucions més habituals de Linux, Android i iOS).

La llista de fonts reals segures web canviarà a mesura que evolucionin els sistemes operatius, però és convenient considerar els següents tipus de fonts web segures, almenys ara com ara (moltes d'elles han estat popularitzades gràcies a Microsoft Fonts principals per la Web una iniciativa de finals dels 90 I principis dels anys 2000):

Nom Tipus genèric Notes
Arial sans-serif Sovint es considera la millor pràctica afegir també Helvètica com una alternativa preferent a Arial, encara que les seves cares de font són gairebé idèntiques, es considera que Helvetica té una forma més agradable, encara que Arial estigui més disponible.
Courier New monospace Alguns sistemes operatius tenen una versió alternativa (possiblement més antiga) de la font Courier New anomenada Courier. Es considera la millor pràctica utilitzar tant amb Courier New com l'alternativa preferida.
Georgia serif  
Times New Roman serif Alguns sistemes operatius tenen una versió alternativa (possiblement més antiga) de la Times New Roman anomenada Times. Es considera la millor pràctica utilitzar tant Times New Roman com l'alternativa preferida.
Trebuchet MS sans-serif Heu de tenir cura amb l'ús d'aquesta font - no està àmpliament disponible en sistemes operatius mòbils.
Verdana sans-serif  

Nota: Entre els diversos recursos, el lloc web cssfontstack.com manté una llista de fonts web segures disponibles en sistemes operatius Windows i Mac OS, que poden ajudar-vos a prendre la decisió sobre el que considereu segur per al vostre ús.

Nota: Hi ha una manera de descarregar una font personalitzada juntament amb una pàgina web, que us permetrà personalitzar l'ús de la font de la manera que vulgueu: fonts web. Això és una mica més complex, i ho debatrem en un article separat més endavant en el mòdul.

Fonts predeterminades

CSS defineix cinc noms genèrics per a les fonts: serif, sans-serif, monospace, cursive i fantasy. Aquests són molt genèrics i la cara de font exacta usada quan s'utilitzen aquests noms genèrics correspon a cada navegador i pot variar per a cada sistema operatiu en què s'executa. Representa un pitjor escenari en què el navegador tractarà de fer el possible per oferir almenys una font que es consideri adequada. serif, sans-serif i monospace són bastant predictibles i han de proporcionar alguna cosa raonable. D'altra banda, la cursive i la fantasy són menys previsibles i us recomanem utilitzar-les amb molta cura, provant-les.

Els cinc noms es defineixen de la manera següent:

Terme Definició Exemple
serif Fonts que tenen serifs (les floritures i altres petits detalls que es veuen en els extrems dels traços en algunes tipografies) My big red elephant
sans-serif Fonts que no tenen serifs. My big red elephant
monospace Fonts on cada caràcter té el mateix ample, normalment utilitzat en llistats de codi. My big red elephant
cursive Fonts que tenen com a objectiu emular l'escriptura manuscrita, amb moviments fluids i connectats. My big red elephant
fantasy Fonts destinades a ser decoratives. My big red elephant

Pila de fonts

Com que no podeu garantir la disponibilitat de les fonts que voleu utilitzar a les vostres pàgines web (fins i tot una font web podria fallar per alguna raó), podeu proporcionar una pila de fonts perquè el navegador tingui diverses fonts que pugui triar. Això només implica un valor de font-family que consta de diversos noms de font separats per comes, p. ex.

p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

En aquest cas, el navegador comença al principi de la llista i mira per veure si aquesta font està disponible a la màquina. Si és així, s'aplica aquesta font als elements seleccionats. De lo contrario, es passa a la següent font, i així successivament.

És recomanable proporcionar un nom de font genèrica adequat al final de la pila, de manera que si cap de les fonts llistades estan disponibles, el navegador pot, almenys, proporcionar alguna cosa aproximadament adequat. Per ressaltar aquest punt, els paràgrafs tenen la font serif predeterminada del navegador si no hi ha cap altra opció disponible - que normalment és Time New Roman - això no és bo per a una font sans-serif!

Nota: Els noms de font que tenen més d'una paraula, com Trebuchet MS - necessiten estar envoltades de cometes.

Un exemple de font-family

Anem a afegir al nostre exemple anterior, donant als paràgrafs una font sans-serif:

p {
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

Això ens dóna el següent resultat:

Mida de la font

En l'article de valors i unitats CSS del mòdul anterior, vam revisar les unitats de longitud i mida. La mida de la font (establerta amb la propietat font-size pot prendre valors mesurats a la majoria d'aquestes unitats (i altres, com ara percentatges), però les unitats més comunes que usareu per a la mida del text són:

  • px (pixels): El nombre de píxels d'alt que volgueu que el text sigui. Aquesta és una unitat absoluta - resulta en el mateix valor calculat final de la font en la pàgina en gairebé qualsevol situació.
  • ems: 1em és igual a la mida de la font establerta a l'element pare de l'element actual que estem dissenyant (més concretament, l'ample d'una lletra majúscula M continguda dins de l'element pare). Això pot arribar a ser complicat si es tenen molts elements niats amb diferentes mides de font establertes, però és factible, com veureu a continuació. Per què preocupar-se? És bastant natural una vegada que us acostumeu, i podeu fer servir ems per dimensionar tot, no només text. Podeu tenir un lloc web complet, utilitzant mides, amb ems, que fa que el manteniment sigui senzill.
  • rems: Aquests funcionen igual que ems, excepte que 1rem és igual a la mida de font establerta a l'element arrel del document (és a dir, <html>), no l'element pare. Això permet que realitzar els càlculs per esbrinar la mida de la font sigui molt més fàcil, però malauradament, els rems no són compatibles amb Internet Explorer 8 o anteriors. Si necessiteu suportar navegadors antics amb el vostre projecte, podeu seguir utilitzant ems o px, o bé utilitzar un polyfill com REM-unit-polyfill

El font-size d'un element s'hereta de l'element pare d'aquest element. Tot això comença amb l'element arrel del document sencer - <html> - en el que font-size està establert en 16px de manera estàndard en els navegadors. Qualsevol paràgraf (o un altre element que no tingui una mida diferent establert pel navegador) a l'interior de l'element arrel tindrà una mida final de 16px. Altres elements poden tenir mides predeterminades diferents, per exemple, un element <h1> té una mida de 2ems establerta per defecte, de manera que tindrà una mida final de 32píxels.

Les coses es tornen més difícils quan es comença a alterar la mida de la font dels elements niats. Per exemple, si tinguéssiu un element <article> a la vostra pàgina i establíssiu la mida de la font a 1.5ems (que calcularía a la mida final de 24px), i llavors volguéssiu els paràgrafs dins d'elements <article> per tenir una mida de font computada de 20px, quin valor em utilitzar

<!-- document base font-size is 16px -->
<article> <!-- If my font-size is 1.5em -->
  <p>My paragraph</p> <!-- How do I compute to 20px font-size? -->
</article>

Haureu d'establir el valor em a 20/24 o 0.83333333ems. Les matemàtiques poden ser complicades, de manera que cal tenir cura amb l'estil de les coses. El millor és utilitzar rems on pugueu, per mantenir les coses senzilles i evitar establir la mida de font dels elements del contenidor quan sigui possible.

Un exemple senzill de dimensionament

Quan dimensioneu el vostre text, normalment és una bona idea establir el font-size base del document a 10px, de manera que llavors les matemàtiques són molt més fàcils de treballar - els valors requerits (r)em són llavors la mida de la font en píxels dividida per 10, no 16. Després de fer això, podeu dimensionar fàcilment els diferents tipus de text del document si és el que voleu. És una bona idea llistar tot el conjunt de regles font-size en una zona designada en el vostre full d'estil, així són fàcils de trobar.

El nostre nou resultat és així:

html {
  font-size: 10px;
}

h1 {
  font-size: 2.6rem;
}

p {
  font-size: 1.4rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

Estil de font, pes de font, transformació de text i decoració de text

CSS proporciona quatre propietats comunes per alterar el pes visual/èmfasi del text:

  • font-style: s'utilitza per activar i desactivar el text en cursiva. Els valors possibles són els següents (rarament es farà servir això, tret que vulgueu desactivar algun estil de cursiva per alguna raó):
    • normal: Estableix el text a la font normal (activa les cursives existents).
    • italic: Estableix el text per utilitzar la versió en cursiva de la font si està disponible; si no està disponible, simularà cursiva amb obliqua.
    • oblique: Estableix el text per utilitzar una versió simulada d'una font en cursiva, creada per inclinar la versió normal.
  • font-weight: estableix el text en negreta. Això té molts valors disponibles en cas que hi hagi moltes variants de fonts disponibles (com ara -light, -normal, -bold, -extrabold, -black, etc.), però de manera realista poques vegades usareu cap d'elles excepte per a normal i bold:
    • normal, bold: Pes de font normal i en negreta
    • lighter, bolder: Estableix intensitat de negreta a l'element actual per estar un pas més lleuger o més pesat que la intensitat de negreta de l'element pare.
    • 100900: Valors numèrics d'intensitat de negreta que proporcionen un control de gra més fi que les paraules clau anteriors, si cal. 
  • text-transform: Us permet configurar la vostra font per a ser transformada. Els valors inclouen:
    • none: Evita qualsevol transformació.
    • uppercase: Transforma TOT EL TEXT A MAJÚSCULES.
    • lowercase: Transforma TOT EL TEXT EN MINÚSCULES.
    • capitalize: Transforma totes les paraules per tenir la Primera Lletra en Majúscula.
    • full-width: Transforma tots els glifs que s'han d'escriure dins d'un quadrat d'amplada fixa, similar a una font monospace, permetent l'alineació de, per ex., caràcters llatins juntament amb glifs de llengua asiàtica (com xinès, japonès, coreà).
  • text-decoration: Estableix/desactiva les decoracions del text en les fonts (s'utilitzarà principalment per desfer el subratllat predeterminat als enllaços en donar-los estil). Els valors disponibles són: 
    • none: Anul·la qualsevol decoració de text ja present.
    • underline: Subralla el text.
    • overline: Posa una línia sobre el text.
    • line-through: Posa un ratllat sobre el text.  Cal tenir en compte que text-decoration pot acceptar diversos valors alhora, si voleu afegir diverses decoracions alhora, per exemple text-decoration: underline overline. Tingueu en compte que text-decoration és una propietat abreujada per a text-decoration-line, text-decoration-style i text-decoration-color. Podeu utilitzar les combinacions d'aquests valors de propietat per crear efectes interessants, per exemple, text-decoration: line-through red wavy

Anem a afegir un parell d'aquestes propietats al nostre exemple:

El nou resultat és així:

html {
  font-size: 10px;
}

h1 {
  font-size: 2.6rem;
  text-transform: capitalize;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.4rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

Ombres en el text

Podeu aplicar ombres al text mitjançant la propietat text-shadow. Això comporta fins a quatre valors, com es mostra a l'exemple següent:

text-shadow: 4px 4px 5px red;

Les quatre propietats són les següents:

  1. El desplaçament horitzontal de l'ombra del text original: això pot prendre la majoria de les unitats de longitud i grandària CSS disponibles, però el més convenient és usar px. Aquest valor s'ha d'incloure.
  2. El desplaçament vertical de l'ombra del text original; es comporta bàsicament igual que el desplaçament horitzontal, excepte que mou l'ombra amunt/avall, no esquerra/dreta. Aquest valor s'ha d'incloure.
  3. El radi borros - un valor més alt significa que l'ombra es dispersa més àmpliament. Si aquest valor no s'inclou, el valor predeterminat és 0, el que significa que no està borros. Això pot prendre la majoria de les unitats de longitud i grandaria CSS disponibles.
  4. El color base de l'ombra, pot prendre qualsevol unitat de  color CSS. Si no s'inclou, el valor predeterminat és black.

Nota: Els valors de desplaçament positius mouen l'ombra cap a la dreta i cap avall, però també podeu utilitzar valors de desplaçament negatius per moure l'ombra cap a l'esquerra i cap amunt, com per exemple -1px -1px.

Múltiples ombres

Podeu aplicar múltiples ombres al mateix text incloent múltiples valors d'ombra separats per comes, per exemple:

text-shadow: -1px -1px 1px #aaa,
             0px 4px 1px rgba(0,0,0,0.5),
             4px 4px 5px rgba(0,0,0,0.7),
             0px 0px 7px rgba(0,0,0,0.4);

Si apliquem això a l'element <h1> en el nostre exemple de Tommy the cat, acabem amb això:

Nota: Podeu veure exemples més interessants d'ús de text-shadow a l'article de Sitepoint Moonlighting with CSS text-shadow.

Disseny del text

Amb les propietats bàsiques de fonts fora del camí, anem a veure les propietats que podem utilitzar per afectar el disseny del text.

Alineació del text

La propietat text-align s'utilitza per controlar com s'alinea el text dins de la caixa que conté el contingut. Els valors disponibles són els següents i funcionen pràcticament de la mateixa manera que ho fa una aplicació de processador de text normal:

  • left: Justifica el text a l'esquerra.
  • right: ustifica el text a la dreta.
  • center: Centra el text.
  • justify: Fa que el text s'estengui, variant els espais entre les paraules perquè totes les línies de text tinguin el mateix ample. Cal fer-ho amb cura - pot semblar terrible, especialment quan s'aplica a un paràgraf amb moltes paraules llargues. Si utilitzeu això, també heu de pensar en utilitzar alguna cosa més, juntament, com ara hyphens, per trencar algunes de les paraules més llargues a través de les línies.

Si s'aplica text-align: center; al <h1> en el nostre exemple, acabem amb això:

Alçada de la línia

La propietat line-height estableix l'alçada de cada línia de text - això pot prendre la majoria de les unitats de longitud i grandària, però també pot prendre un valor sense unitat, que actua com a multiplicador i generalment es considera la millor opció - el font-size es multiplica per obtenir line-height. El text del cos generalment es veu millor i és més fàcil de llegir quan les línies estan separades; L'alçada de la línia recomanada és d'aproximadament 1,5-2 (a doble espai). Per tant, per establir les nostres línies de text fins a 1,5 vegades l'alçada de la font, s'utilitza això:

line-height: 1.5;

Aplicar això als elements <p> del nostre exemple ens donaria aquest resultat

Espaiat entre lletres i paraules

Les propietats spacing-letter i word-spacing permeten establir l'espaiat entre lletres i paraules en el text. No ho fareu amb molta freqüència, però potser ho trobeu útil per obtenir una certa visió, o per millorar la llegibilitat d'una font especialment densa. Poden prendre la major part de les unitats de longitud i grandària.

Per exemple, si apliquem el següent a la primera línia dels elements <p> en el nostre exemple:

p::first-line {
  letter-spacing: 2px;
  word-spacing: 4px;
}

Conseguiríem el següent:

Altres propietats que val la pena veure

Les propietats anteriors us donen una idea de com començar a donar estil al text a una pàgina web, però hi ha moltes més propietats que podeu utilitzar. Només volíem cobrir les més importants aquí. Un cop us hàgiu acostumat a fer servir l'anterior, també heu d'explorar el següent:

Estils de font:

  • font-variant: Alterna entre les minúscules i les fonts normals
  • font-kerning: Activa i desactiva les opcions de font kerning.
  • font-feature-settings: Activa i desactiva diverses característiques de la font OpenType.
  • font-variant-alternates: Controla l'ús de glifs alternatius per a una font-face determinada.
  • font-variant-caps: Controla l'ús de glifs capital alternatius.
  • font-variant-east-asian: Controla l'ús de glifs alternatius per als scripts de l'Àsia roiental, com ara el japonès i el xinès.
  • font-variant-ligatures: Controla les lligadures i les formes contextuals que s'utilitzen en text.
  • font-variant-numeric: Controla l'ús de glifs alternatius per a números, fraccions i marcadors ordinaris.
  • font-variant-position: Controla l'ús de glifs alternatius de mides més petites posicionades com superíndex o subíndex.
  • font-size-adjust: Ajusta la mida visual de la font independentment de la mida real de la font.
  • font-stretch: Alternar entre versions estirades alternatives possibles d'una font donada.
  • text-underline-position: Especifica la posició de subratllats amb el valor del subratllat de la propietat text-decoration-line.
  • text-rendering: Intenta realitzar una optimització de la representació del text.

Estils de disseny de text

  • text-indent: Especifica quant espai horitzontal s'hauria de deixar abans del començament de la primera línia del contingut del text.
  • text-overflow: Defineix com el contingut desbordat que no es mostra es senyalitza als usuaris.
  • white-space: Defineix com es manegen els espais en blanc i els salts de línia associats dins de l'element.
  • word-break: Especifica si voleu trencar línies dins de les paraules.
  • direction: Defineix la direcció del text (Això depèn del llenguatge i, en general, és millor deixar que HTML manegi aquesta part ja que està lligada al contingut del text).
  • hyphens: Activa i desactiva la divisió de paraules per als idiomes admesos.
  • line-break: Relaxa o reforça la ruptura de línies per a les llengües asiàtiques.
  • text-align-last: Defineix com s'alinea l'última línia d'un bloc o una línia, just abans d'un salt de línia forçada.
  • text-orientation: Defineix l'orientació del text en una línia.
  • word-wrap: Especifica si el navegador pot trencar o no línies dins de les paraules per evitar el desbordament.
  • writing-mode: Defineix si les línies de text estan establertes horitzontalment o verticalment i la direcció en què flueixen les línies posteriors.

Font abreujada

També es poden establir moltes propietats de fonts a través de la propietat abreujada font. Aquestes estan escrites en el següent ordre:  font-style, font-variant, font-weight, font-stretch, font-size, line-height i font-family.

Entre totes aquestes propietats, només es requereixen font-size i font-family quan s'utilitza la propietat abreujada font.

S'ha d'incloure una barra diagonal entre les propietats font-size i line-height.

Un exemple complet seria aquest:

font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;

Aprenentatge actiu: jugar amb text d'estil

En aquesta sessió d'aprenentatge actiu, no tenim cap exercici específic per fer: ens agradaria que sabéssiu jugar amb algunes propietats de disseny de font/text, i vegeu què podeu produir. Podeu fer-ho utilitzant fitxers els HTML/CSS fora de línia o introduïu el vostre codi a l'exemple editat en viu a continuació.

Si cometeu un error, sempre podeu restablir-lo mitjançant el botó Reset.

Resum

Esperem que hàgiu gaudit jugant amb el text en aquest article! El següent article us donarà tot el que necessiteu saber sobre l'estil de llistes HTML. .

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,