{"id":96,"date":"2023-05-15T15:57:36","date_gmt":"2023-05-15T13:57:36","guid":{"rendered":"https:\/\/user0.gesem.es\/blog\/?page_id=96"},"modified":"2023-05-22T21:03:32","modified_gmt":"2023-05-22T19:03:32","slug":"families-de-tipografies","status":"publish","type":"page","link":"https:\/\/user0.gesem.es\/blog\/families-de-tipografies\/","title":{"rendered":"Families de tipografies i altres ajustos"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Quan fem una p\u00e0gina web, dif\u00edcilment sabem en quins entorns es visualitzar\u00e0. El CSS preveu aix\u00f2. La manera com definim les tipografies n&#8217;\u00e9s un exemple.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quan indiquem la tipografia que volem fer servir, hem de tenir en compte que no sabem si l&#8217;usuari tindr\u00e0 aquesta tipografia instal\u00b7lada. Per aix\u00f2 no donem una \u00fanica tipografia, sin\u00f3 una familia de tipografies.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>p{<br>font-family: Helvetica, Arial, sans-serif;<br>}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">En l&#8217;exemple, Helvetica i Arial s\u00f3n el nom de dues tipografies. Sans-serif, en canvi, \u00e9s el nom de tota una familia (aquelles tipografies sense serifa). El navegador mirar\u00e0 de fer servir Helvetica i si no la troba, provar\u00e0 amb el seg\u00fcent element de la llista: Arial. Si tampoc troba Arial, aleshores buscar\u00e0 una tipografia qualsevol que no tingui serifa.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Les families de tipografies s\u00f3n:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>sans-serif: sense serifa<\/li>\n\n\n\n<li>serif: amb serifa<\/li>\n\n\n\n<li>fantasy: especials<\/li>\n\n\n\n<li>cursive: imiten la caligrafia<\/li>\n\n\n\n<li>monospace: tipus m\u00e0quina d&#8217;escriure, totes les lletres ocupen el mateix<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Web fonts<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Una altra opci\u00f3 \u00e9s fer servir tipografies web. Aquestes tipografies s\u00f3n descarregades a l&#8217;ordinador de l&#8217;usuari temporalment per el seu \u00fas a una p\u00e0gina web. El millor \u00e9s fer servir un servei de tipografies web, que s&#8217;encarrega d&#8217;allotjar les tipografies i servir-les a l&#8217;usuari que les necessita. Hi ha serveis de tipografies web de pagament i gratu\u00efts.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El servei d&#8217;allotjament de tipografies web gratu\u00eft m\u00e9s popular \u00e9s Google Web Fonts.<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group exercici exercicis\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\">Exercici:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tria una parella de tipografies per fer-la servir al teu exercici de les pioneres (de moment, nom\u00e9s tria les tipografies).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pots buscar-la aqu\u00ed:<br><a rel=\"noreferrer noopener\" href=\"https:\/\/www.fontpair.co\/all\" target=\"_blank\">https:\/\/www.fontpair.co\/all<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><a href=\"https:\/\/user0.gesem.es\/blog\/com-fer-servir-tipografies-de-google-fonts\/\">Com aplicar tipografies de google fonts?<\/a><\/strong><\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Propietats aplicables a la tipografia<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A continuaci\u00f3 trobar\u00e0s una s\u00e8rie de propietats aplicables a la tipografia i les URLs on trobar\u00e0s tots els seus possibles valors. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><br><strong>font-weight<\/strong><br><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/CSS\/font-weight\" target=\"_blank\">https:\/\/developer.mozilla.org\/es\/docs\/Web\/CSS\/font-weight<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>font-style<\/strong><br><a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/CSS\/font-style\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/developer.mozilla.org\/es\/docs\/Web\/CSS\/font-style<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>text-transform<\/strong><br><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/CSS\/text-transform\" target=\"_blank\">https:\/\/developer.mozilla.org\/es\/docs\/Web\/CSS\/text-transform<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>text-decoration<\/strong><br><a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/CSS\/text-decoration\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/developer.mozilla.org\/es\/docs\/Web\/CSS\/text-decoration<\/a><\/p>\n\n\n\n<div class=\"wp-block-group exercici exercicis\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\">Exercici<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aplica les seg\u00fcents propietats als enlla\u00e7os de la navegaci\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>negreta<\/li>\n\n\n\n<li>maj\u00fascules<\/li>\n\n\n\n<li>sense subratllar<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quan fem una p\u00e0gina web, dif\u00edcilment sabem en quins entorns es visualitzar\u00e0. El CSS preveu aix\u00f2. La manera com definim les tipografies n&#8217;\u00e9s un exemple. Quan indiquem la tipografia que volem fer servir, hem de tenir en compte que no sabem si l&#8217;usuari tindr\u00e0 aquesta tipografia instal\u00b7lada. Per aix\u00f2 no donem una \u00fanica tipografia, sin\u00f3&hellip; <a class=\"more-link\" href=\"https:\/\/user0.gesem.es\/blog\/families-de-tipografies\/\">Continueu llegint <span class=\"screen-reader-text\">Families de tipografies i altres ajustos<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-96","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/96","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/comments?post=96"}],"version-history":[{"count":7,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/96\/revisions"}],"predecessor-version":[{"id":134,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/96\/revisions\/134"}],"wp:attachment":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/media?parent=96"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}