1 files changed, 193 insertions, 0 deletions
diff --git a/files/ca/learn/css/styling_text/web_fonts/index.html b/files/ca/learn/css/styling_text/web_fonts/index.html
new file mode 100644
index 0000000000..b4d1e8ecfd
--- /dev/null
+++ b/files/ca/learn/css/styling_text/web_fonts/index.html
@@ -0,0 +1,193 @@
+---
+title: Fonts Web
+slug: Learn/CSS/Estilitzar_text/Fonts_Web
+tags:
+  - '@font-face'
+  - Article
+  - Beginner
+  - CSS
+  - Fonts
+  - Guide
+  - Learn
+  - font-family
+  - web fonts
+translation_of: Learn/CSS/Styling_text/Web_fonts
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</div>
+
+<p class="summary">En el primer article del mòdul hem explorat les característiques bàsiques de CSS que hi ha disponibles per a aplicar estil a la lletra i el text. En aquest article anem més lluny i explorem els tipus de lletra per a web amb detall, que permeten descarregar tipus de lletra personalitzats junt amb la teva pàgina web i et proporciona més varietat i personalització en l’aplicació d’estil als textos.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Requisits previs:</th>
+   <td>Coneixements bàsics d'informàtica, fonaments d'HTML (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l’HTML</a>), fonaments de CSS (consulta la <a href="/ca/docs/Learn/CSS/First_steps">Introducció al CSS</a>), <a href="/ca/docs/Learn/CSS/Estilitzar_text/Text_fonamental">fonaments d’aplicació d’estil a tipus de lletra i textos</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectiu:</th>
+   <td>Aprendre com aplicar tipus de lletra per a web a una pàgina web utilitzant un servei de tercers o escrivint el teu codi propi.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Recapitulació_sobre_famílies_de_tipus_de_lletra">Recapitulació sobre famílies de tipus de lletra</h2>
+
+<p>Com hem vist en l’article <a href="/ca/docs/Learn/CSS/Estilitzar_text/Text_fonamental">Fonaments d’aplicació d’estil a la lletra i els textos</a>, pots controlar les fonts que fas servir per al teu HTML amb la propietat {{cssxref("font-family")}}. Aquesta propietat pren un o més noms de famílies de tipus de lletra i el navegador recorre la llista fins que troba un tipus de lletra que estigui disponible en el sistema en què s'executa:</p>
+
+<pre class="brush: css notranslate">p {
+  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
+}</pre>
+
+<p>Aquest sistema funciona bé, però tradicionalment les opcions de tipus de lletra per al desenvolupament web han estat limitades. Només hi ha un grapat de tipus de lletra per a les que pots garantir la disponibilitat en tots els sistemes habituals, els anomenats <a href="/ca/docs/Learn/CSS/Estilitzar_text/Text_fonamental#Fam%C3%ADlies_de_tipus_de_lletra">tipus de lletra segurs per al web (<em>web-safe fonts</em>)</a>. Pots especificar la llista dels tipus de lletra preferents, seguits dels tipus de lletra alternatius segurs per al web, seguits dels tipus de lletra del sistema per defecte, però això afegeix una sobrecàrrega en termes de proves per a assegurar-te que els teus dissenys de pàgina presenten un aspecte correcte amb cada tipus de lletra, etc.</p>
+
+<h2 id="Tipografies_web"><span id="result_box" lang="ca">Tipografies web</span></h2>
+
+<p>Però hi ha una alternativa, que funciona molt bé, ja des de la versió 6 d'IE. Les tipografies web són una característica CSS que et permet especificar els fitxers de tipus de lletra que vols que es descarreguin juntament amb el teu lloc web quan s’hi accedeix, i això fa que qualsevol navegador que admet tipografies web pot disposar exactament dels tipus de lletra que especifiques. Increïble! La sintaxi necessària presenta aquest aspecte:</p>
+
+<p>En primer lloc, hi ha un bloc de codi {{cssxref("@font-face")}} al començament del CSS, que especifica els fitxers de tipus de lletra que vols que es descarreguin:</p>
+
+<pre class="brush: css notranslate">@font-face {
+  font-family: "myFont";
+  src: url("myFont.ttf");
+}</pre>
+
+<p>A continuació pots aplicar el nom de la família del tipus de lletra personalitzada que has especificat en @font-face a qualsevol cosa que vulguis, de la manera habitual:</p>
+
+<pre class="brush: css notranslate">html {
+  font-family: "Bitstream Vera Serif Bold", serif;
+}</pre>
+
+<p>La sintaxi es comença a complicar una mica. A continuació hi entrem amb detall.</p>
+
+<p>Hi ha dues coses importants que cal tenir en compte sobre els tipus de lletra segurs per al web:</p>
+
+<ol>
+ <li>Els navegadors admeten diversos formats de tipus de lletra, de manera que necessites diversos formats de tipus de lletra per a atènyer una compatibilitat de navegador decent. Per exemple, la majoria dels navegadors més moderns admeten WOFF / WOFF2 (Web Open Font Format, versions 1 i 2), el format més eficient per a tot, però les versions anteriors d'IE només admeten tipus de lletra EOT (Embedded Open Type), i és possible que hagis d'incloure una versió de tipus de lletra SVG per tenir compatibilitat amb versions anteriors dels navegadors iPhone i Android. A continuació et mostrarem com generar el codi necessari.</li>
+ <li>Normalment els tipus de lletra no són d’ús lliure. Cal pagar per a fer-los servir o assumir unes condicions de llicència, com ara acreditar el creador del tipus de lletra en el codi (o en el teu lloc web). No hauries de robar els tipus de lletra ni utilitzar-los sense donar-ne el crèdit adequat.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Els tipus de lletra web com a tecnologia són compatibles amb Internet Explorer des de la versió 4!</p>
+</div>
+
+<h2 id="Aprenentatge_actiu_Un_exemple_de_tipografia_web">Aprenentatge actiu: Un exemple de tipografia web</h2>
+
+<p>Tenint en compte això, construïm un exemple bàsic de tipografia web des de zero. És difícil mostrar-ho a partir d’un exemple en viu, de manera que, en lloc d'això, seguirem els passos detallats en les seccions següents, per a tenir una idea del procés.</p>
+
+<p>Has d'utilitzar els fitxers <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html">web-font-start.html</a> i <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css">web-font-start.css</a> com a punt de partida per a afegir el codi (consulta també el codi de l’<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html">exemple en viu</a>). Fes també una còpia d'aquests fitxers en un directori nou al teu ordinador. En el fitxer <code>web-font-start.css</code> hi ha una mica de CSS per tractar el disseny bàsic i la tipografia de l'exemple.</p>
+
+<h3 id="Buscar_tipus_de_lletra">Buscar tipus de lletra</h3>
+
+<p>Per a aquest exemple, utilitzarem dos tipografies web, un per als títols d’encapçalament i un per al text del cos (<code>body</code>). Per començar, hem de trobar els fitxers que contenen els tipus de lletra. Els tipus de lletra es creen en estudis de disseny i s'emmagatzemen en diferents formats de fitxer. En general, hi ha tres tipus de llocs web en què pots obtenir tipus de lletra:</p>
+
+<ul>
+ <li>Distribuïdors de tipus de lletra gratuït: són llocs web que posen a disposició per a descarregar tipus de lletra gratuïtament (encara que hi pot haver certes condicions de llicència, com ara acreditar el creador del tipus de lletra). Alguns exemples són: <a href="https://www.fontsquirrel.com/">Font Squirrel</a>, <a href="http://www.dafont.com/">dafont</a> i <a href="https://everythingfonts.com/">Everything Fonts</a>.</li>
+ <li>Distribuïdors de tipus de lletra de pagament: llocs web que posen a disposició tipus de lletra per una quantitat de diners, com <a href="http://www.fonts.com/">fonts.com</a> o <a href="http://www.myfonts.com/">myfonts.com</a>. També pots comprar tipus de lletra directament a creadors de tipus de lletres, per exemple <a href="https://www.linotype.com/">Linotype</a>, <a href="http://www.monotype.com">Monotype</a> o <a href="http://www.exljbris.com/">Exljbris</a>.</li>
+ <li>Serveis de tipus de lletra en línia: llocs web que emmagatzemen i serveixen tipus de lletra, i que simplifiquen el procés sencer. Consulta’n els detalls en la secció {{anch("Usar un servei de tipografies en línia")}}.</li>
+</ul>
+
+<p>Busquem ara alguns tipus de lletra! Ves a <a href="https://www.fontsquirrel.com/">Font Squirrel</a> i tria dos tipus de lletra, un que et resulti interessant i agradable per als títols (ppotser una bona tipografia tipus "Display" o "Slab Serif"), i un altre una mica menys cridaner i que resulti més llegible, per als paràgrafs. Quan hagis trobat cada tipus, prem el botó de descàrrega i desa el fitxer en el mateix directori que hi ha els fitxers HTML i CSS que has desat abans. No importa si són en format TTF (True Type Fonts) o OTF (Open Type Fonts).</p>
+
+<p>En cada cas, descomprimeix el paquet amb els tipus de lletra (les tipografies web s’acostumen a distribuir en fitxers ZIP que contenen els fitxers dels tipus de lletra i la informació de la llicència). Pots trobar diversos fitxers de tipus de lletra en el paquet —alguns tipus de lletra es distribueixen com una família, amb diverses variants disponibles, per exemple, fina, seminegreta, negreta, cursiva, cursiva fina, etc. Per a aquest exemple, només cal que et preocupis d'un únic fitxer de tipus de lletra per cada elecció.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: en la columna de la dreta de la secció «Busca tipus de lletra», pots fer clic en les diverses etiquetes, i classificacions per filtrar les opcions que es mostren.</p>
+</div>
+
+<h3 id="Generació_del_codi_necessari">Generació del codi necessari</h3>
+
+<p>Ara cal generar el codi necessari (i els formats de tipus de lletra). Per cada tipografia, segueix aquests passos:</p>
+
+<ol>
+ <li>Assegura’t que compleixes tots els requisits de llicència si vols fer servir això en un projecte comercial o en el web.</li>
+ <li>Ves al <a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont Generator</a> de Font Squirrel.</li>
+ <li>Carrega els dos fitxers de tipus de lletra amb el botó <em>Upload Fonts</em>.</li>
+ <li>Marca la casella de verificació amb el text «Sí, els tipus de lletra que carrego són legalment aptes per a la inclusió en el web».</li>
+ <li>Fes clic a <em>Download your kit</em>.</li>
+</ol>
+
+<p>Un cop el generador ha acabat de processar, has d'obtenir un fitxer ZIP, descarregar-lo i desar-lo al mateix directori que els teus HTML i CSS.</p>
+
+<h3 id="Implementar_el_codi_a_la_teva_demo">Implementar el codi a la teva demo</h3>
+
+<p>En aquest punt, has de descomprimir el paquet de fitxers de tipus de lletra segurs per al web que acabes de generar. Dins del directori descomprimit, hi haurà tres elements útils:</p>
+
+<ul>
+ <li>Diverses versions de cada tipus de lletra: <code>.eot</code>, <code>.svg</code>, <code>.ttf</code>, <code>.woff</code>, <code>.woff2</code>. Com ja s’ha dit, calen diversos tipus de fitxers de tipus de lletra per a tenir compatibilitat amb els navegadors; aquesta és la manera que té Font Squirrel d’assegurar-se que tens tot el que necessites.</li>
+ <li>Un fitxer HTML de demostració per a cada font; carrega’l en el teu navegador i observa com es veu el tipus de lletra en diferents contextos d'ús.</li>
+ <li>Un fitxer <code>stylesheet.css</code> que conté el codi @font-face generat que necessites.</li>
+</ul>
+
+<p>Per a implementar aquests tipus de lletra en el teu exemple de demostració, segueix aquests passos:</p>
+
+<ol>
+ <li>Canvia el nom del directori descomprimit per un nom que sigui senzill i fàcil de recordar, com ara <code>fonts</code>.</li>
+ <li>Obre el fitxer <code>stylesheet.css</code> i copia-hi els blocs <code>@font-face</code> que conté en el teu fitxer <code>web-font-start.css</code>; has de posar-los a dalt de tot, abans de qualsevol bloc de CSS, perquè els tipus de lletra s’han d’importar abans de poder-los utilitzar en el teu lloc web.</li>
+ <li>Cadascuna de les funcions <code>url()</code> apunta a un fitxer de tipus de lletra que volem importar al nostre CSS; afegeix <code>fonts/</code> al començament de cada ruta (o adapta-ho si cal) per a assegurar-te que les rutes d'accés als fitxers són correctes.</li>
+ <li>Ara pots utilitzar aquests tipus de lletra en les llistes d’arxius de tipus de lletra, igual que qualsevol tipus de lletra segur per al web o tipus de lletra predeterminat del sistema. Per exemple:
+  <pre class="brush: css notranslate">font-family: 'zantrokeregular', serif;</pre>
+ </li>
+</ol>
+
+<p>Has d'acabar amb una pàgina de demostració amb alguns tipus de lletra agradables implementats. Atès que els diferents tipus de lletra es creen amb mides diferents, és possible que hagis d'ajustar la mida, l'espaiat, etc., per a ordenar-ne l'aspecte.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12984/web-font-example.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si tens problemes perquè funcioni, no dubtis de comparar la teva versió amb els nostres fitxers acabats; consulta <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html">web-font-finished.html</a> i <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css">web-font-finished.css</a> (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html">executa l'exemple acabat en directe</a>).</p>
+</div>
+
+<h2 id="Usar_un_servei_de_tipografies_en_línia">Usar un servei de tipografies en línia</h2>
+
+<p>Els serveis de tipus de lletra en línia normalment emmagatzemen i serveixen tipus de lletra per tu, de manera que no t’has de preocupar d’escriure el codi <code>@font-face</code>, i generalment només cal que insereixis una o dues línies de codi al teu lloc web perquè tot funcioni. Alguns exemples són: <a href="https://typekit.com/">Typekit</a> i <a href="http://www.typography.com/cloud/welcome/">Cloud.typography</a>. La majoria d'aquests serveis estan basats en subscripcions, amb la notable excepció de <a href="https://www.google.com/fonts">Google Fonts</a>, un útil servei gratuït, especialment per a fer proves ràpides i demostracions d'escriptura.</p>
+
+<p>La majoria d'aquests serveis són fàcils d'utilitzar, de manera que no hi entrarem amb molt de detall. Vegem ràpidament les fonts de Google, perquè puguis fer-te’n la idea. De nou, fes còpies de <code>web-font-start.html</code> i <code>web-font-start.css</code> com a punt de partida.</p>
+
+<ol>
+ <li>Ves a <a href="https://www.google.com/fonts">Google Fonts</a>.</li>
+ <li>Utilitza els filtres de la banda esquerra per visualitzar els tipus de lletra que vols triar i escull un parell de tipus de lletra.</li>
+ <li>Per a seleccionar un tipus de lletra, prem el botó <em>Add to Collection</em> que hi ha al costat.</li>
+ <li>Quan hagis escollit els tipus de lletra, prem el botó <em>Use</em> que hi ha a la part inferior de la pàgina.</li>
+ <li>A la pantalla resultant, primer has de copiar la línia de codi que es mostra a la secció 3 i enganxar-la al final de tot del teu fitxer HTML. Posa-la per sobre de l'element {{htmlelement("link")}} perquè el tipus de lletra s'importi abans que el teu CSS l’hagi d’utilitzar.</li>
+ <li>A continuació, has de copiar les declaracions que hi ha en la secció 4 al teu CSS, segons correspongui, per a aplicar els tipus de lletra personalitzats al teu codi HTML.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Pots trobar una versió completa a <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html">google-font.html</a> i <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css">google-font.css</a>, si et cal contrastar el teu treball amb el nostre (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html">consulta-ho en directe</a>).</p>
+</div>
+
+<h2 id="font-face_amb_més_detall">@font-face amb més detall</h2>
+
+<p>Explorem la sintaxi <code>@font-face</code> que genera Font Squirrel. Aquest és l’aspecte que presenta un dels blocs:</p>
+
+<pre class="brush: css notranslate">@font-face {
+  font-family: 'ciclefina';
+  src: url('fonts/cicle_fina-webfont.eot');
+  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
+         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
+         url('fonts/cicle_fina-webfont.woff') format('woff'),
+         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
+         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}</pre>
+
+<p>Això s'anomena «sintaxi a prova de bales @font-face» des d'una publicació de Paul Irish dels inicis, quan <code>@font-face</code> va començar a ser popular (<a href="http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/">Bulletproof @font-face Syntax</a>). Passem a veure què fa:</p>
+
+<ul>
+ <li><code>font-family</code>: Aquesta línia especifica el nom amb què et faràs referència al fitxer de tipus de lletra que empraràs. Pots posar-hi qualsevol cosa que t’agradi, sempre que l'utilitzis de manera coherent en tot el teu codi CSS.</li>
+ <li><code>src</code>: Aquestes línies especifiquen les rutes d'accés als fitxers de tipus de lletra que cal que importis al teu CSS (la part d'URL) i el format de cada fitxer de tipus de lletra (la part <code>format</code>). L'última part en cada cas és opcional, però és útil declarar-la perquè permet als navegadors trobar més ràpidament el tipus de lletra que poden utilitzar. Es poden incloure diverses declaracions, separades per comes; el navegador buscarà entre elles i usarà la primera que trobi que entén; per tant, és millor posar abans formats nous i millors, com WOFF2, i formats més antics i no tan bons, com TTF, després. L'única excepció d’això són les fonts EOT, que es col·loquen en primer lloc per corregir un parell d'errors en les versions anteriors d'IE, que intentarà utilitzar la primera que trobi, fins i tot si no pot utilitzar el tipus de lletra.</li>
+ <li>{{cssxref("font-weight")}}/{{cssxref("font-style")}}: Aquestes línies especifiquen el gruix del tipus de lletra i si és cursiva o no. Si importes diversos gruixos del mateix tipus de lletra, en pots especificar gruix/estil i, a continuació, utilitzar valors diferents de {{cssxref("font-weight")}}/{{cssxref("font-style")}} per a triar entre ells, en lloc d'haver de cridar tots els membres diferents de la família de tipus de lletra pels diferents noms. <a href="http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/">@font-face tip: define font-weight and font-style to keep your CSS simple</a>, de Roger Johansson, mostra amb més detall què cal fer.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: També pots especificar cada valor {{cssxref("font-variant")}} i {{cssxref("font-stretch")}} per als teus tipus de lletra segurs per al web. En els navegadors més nous també pots especificar un valor {{cssxref("unicode-range")}}, que és una gamma de caràcters específica que vols utilitzar a banda del tipus de lletra segur per al web; en els navegadors compatibles amb aquesta propietat, només es descarregaran els caràcters especificats, per a estalviar descàrregues innecessàries. <a href="https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/">Creating Custom Font Stacks with Unicode-Range</a>, de Drew McLellan, t’ofereix unes idees útils sobre com fer-ne ús.</p>
+</div>
+
+<h2 id="Resum">Resum</h2>
+
+<p>Ara que has treballat els nostres articles sobre els fonaments d’aplicació d'estil al text, és hora de posar a prova el que has après amb la nostra avaluació per al mòdul, Composició tipogràfica d’una pàgina d’inici per a un lloc web d’una escola de la comunitat.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</p>