Com s'utilitzen millor els tipus de lletra a CSS?

Aquest article us presentarà un tema senzill però important, que és Fonts In i també us oferirà una demostració pràctica sobre el tema. En aquest article es tractaran les següents indicacions,

• Tipus de lletra en CSS
• Atributs en tipus de lletra CSS
• atribut estil de lletra
• atribut font-weight
• atribut font-size
• atribut font-family

Els llocs web contenen contingut en forma d’imatges, àudio, vídeo i contingut textual. Tanmateix, la majoria de pàgines web encara confien en el text com a format predominant. Això es deu al fet que el text pla ofereix alguns avantatges molt importants.

Legibilitat no intrusiva: voleu comprovar la puntuació de partit més recent a l’oficina. Viouslybviament, voleu una actualització ràpida del text, no un vídeo sorollós.
Requisit d’amplada de banda de xarxa baix: el contingut de text es pot carregar fins i tot en zones de connectivitat a Internet pobres, mentre que els suports rics no.
Fàcil de fer cerques: els llocs web sempre vigilen la facilitat amb què es nota el seu contingut als motors de cerca. El text és el més adequat per a això, almenys fins que la IA es faci càrrec d'Internet completament.

Tot i formatar el contingut de text, els dissenyadors web només tenen pocs paràmetres per treballar: tipus de lletra, alineació, ressaltat i color. Seleccionar el tipus de lletra adequat per al text és una opció fonamental. La pràctica estàndard és utilitzar etiquetes de tipus de lletra CSS per definir tipus de lletra per a text a les pàgines HTML.
Si no coneixeu el món de la programació HTML, feu una visita bàsica aquí. És possible que vulgueu llegir els conceptes bàsics de CSS abans de continuar aprenent sobre els tipus de lletra CSS.

Per obtenir un tutorial CSS complet, visiteu Edureka CSS Tutorial per a principiants. Obtindreu un excel·lent avenç sobre la manera com s’ha d’utilitzar CSS per augmentar el disseny web HTML.

Continuem amb aquest article sobre Tipus de lletra a CSS

Tipus de lletra en CSS

Una font és bàsicament un conjunt de característiques associades a la visualització de text. Els tipus de lletra es diferencien entre ells per la seva mida, sagnat, amplada, inclinació, etc. Comencem amb una visualització de text bàsica en diferents tipus de lletra.

Exemple 1: encapçalaments i paràgrafs en diverses fonts

body {background-color: lightblue} h1 {font: bold 30px arial, sans-serif} h2 {font: 15px verdana} p {font: italic bold 12px / 30px Georgia, serif}
El paràgraf en lletra cursiva i negreta de Geòrgia
com es crea un paquet a Java
 

 Exemple 1: sortida 

A l'exemple 1, tenim 3 línies de text diferents amb tipus de lletra diferents. Notareu que cadascun dels tipus de lletra varia en funció de l'amplada de caràcters, sagnats, etc.

Continuem amb aquest article sobre Tipus de lletra a CSS

Atributs en tipus de lletra CSS

Els tipus de lletra CSS tenen 4 atributs principals: estil, pes, mida i família. L'atribut style indica normal o cursiva. El pes mostra el tipus de lletra com a simple o en negreta. El pes també es pot expressar numèricament. La mida és simplement la mida de la lletra més gran, més gran és el text en aparença. Hi ha diverses maneres en què es pot assignar la mida de la lletra; les seccions posteriors donen descripcions detallades. L'atribut familiar és assignar el nom de la font al text.

A l'exemple 1, hem utilitzat diferents noms de tipus de lletra per als encapçalaments i els paràgrafs. A les etiquetes h1 i p, hi apareixen dos noms de tipus de lletra, mentre que les etiquetes h2 només nomenen una. Aquesta és la definició d'una família de tipus de lletra, més sobre això més endavant.

Continuem amb aquest article sobre Tipus de lletra a CSS

atribut estil de lletra:

Els dos estils principals que es poden configurar són 'normal' i 'cursiva'. Se suposa que la cursiva té una naturalesa cursiva amb una inclinació. Normal és l’opció predeterminada que és recta. Hi ha una altra opció menys utilitzada anomenada 'oblic', que s'assembla a l'opció de cursiva en la majoria de tipus de lletra. També podeu configurar l’estil per heretar perquè prengui l’estil de lletra del seu element pare.

Continuem amb aquest article sobre Tipus de lletra a CSS

atribut font-weight:

Aquest atribut decideix si el tipus de lletra ha de semblar gruixut o prim. Es pot configurar com a 'normal' o 'en negreta'. El valor per defecte és normal. Aquest valor també es pot establir com a numèric. El pes de 400 representa el normal i 700 és en negreta. Hi ha altres opcions de configuració (que van des de 100, molt lleugeres fins a 900, molt audaces), però no són compatibles amb tots els tipus de lletra. Totes les opcions de pes es mostren a l'exemple 3.

Continuem amb aquest article sobre Tipus de lletra a CSS

atribut de mida de tipus de lletra:

L'atribut size es pot configurar de diverses maneres. A continuació, detallem aquestes maneres.
● Valor enumerat, com ara 'mitjà' i 'gran'. De fet, igual que les mides de roba, els valors poden anar des de XX Small fins a XX Large.
● Estableix en relació amb el seu element pare, com a 'més gran' o 'més petit'.
● Percentatge de la mida de l’element pare.
● Establiu com a 'hereta' per adoptar directament la mida de l'element pare.
● Com a valor absolut en les unitats de px (píxels), pt (punts) o cm (centímetre)
'Mitjà' és el valor predeterminat establert per a aquest paràmetre.

Continuem amb aquest article sobre Tipus de lletra a CSS

atribut font-family:

En HTML, la família de tipus de lletra CSS permet definir el nom de la font. Podeu posar un nom de font únic amb l'etiqueta. També podeu assignar diversos valors com a llista de tipus de lletra que defineixi la prioritat en què el navegador hauria de triar la font.
La llista es prioritza d’esquerra a dreta, en forma de sistema de reserva. Es tria el primer valor, si està disponible, o el control passa al següent, fins que s'arriba al final de la llista. Les preferències del navegador defineixen la família de tipus de lletra predeterminada.
Les famílies de tipus de lletra CSS són de 2 tipus: famílies de tipus de lletra genèriques i famílies.
● Famílies genèriques: en funció d’algunes característiques generals, els tipus de lletra s’agrupen com ‘serif’, ‘sans serif’, ‘monoespai’, etc. Per exemple, Sans serif significa tipus de lletra sense l’estil serif.
● Noms de família: tipus de lletra pertanyents a jerarquies familiars específiques. Times, Arial, Courier són famílies de tipus de lletra i Times New Roman és un tipus de lletra de la família Times.
Les diverses opcions d’ús de la família de tipus de lletra s’enumeren a l’exemple 4 següent.

què és el càsting tipus a Java

Alguns punts comuns a tenir en compte

● Igual que altres propietats CSS, algunes de les opcions de tipus de lletra varien segons els navegadors. Comproveu si el navegador és compatible abans d’utilitzar alguns paràmetres de tipus de lletra rars.
● Podeu configurar la configuració del tipus de lletra per separat mitjançant les etiquetes individuals de font-style, font-weight, etc. Si preferiu un codi compacte, podeu utilitzar l'atribut de font abreujat amb tots els valors de la mateixa línia.
● En els escenaris d'usuari en què vulgueu que la mida del tipus de lletra variï segons la mida del navegador, hi ha una configuració útil de mida de tipus de lletra anomenada configuració de tipus de lletra responsiva. Es pot configurar amb una unitat vw, que significa 'amplada de la finestra de visualització'. D'aquesta manera, la mida del text seguirà la mida de la finestra del navegador.

Espero que hagueu trobat la informació que cercàveu a Tipus de lletra a CSS. Comparteix la teva experiència amb nosaltres a la secció de comentaris següent. Disseny feliç!

Si esteu interessats en obtenir més informació sobre el desenvolupament web, consulteu el per Edureka. La formació en certificació per al desenvolupament web us ajudarà a aprendre a crear llocs web impressionants mitjançant HTML5, CSS3, Twitter Bootstrap 3, jQuery i API de Google i implementar-lo a Amazon Simple Storage Service (S3).