{"id":3128,"date":"2013-01-24T16:57:53","date_gmt":"2013-01-24T19:57:53","guid":{"rendered":"http:\/\/irisfernandez.com.ar\/betaweblog\/?p=3128"},"modified":"2013-01-24T16:57:53","modified_gmt":"2013-01-24T19:57:53","slug":"fonts-para-web","status":"publish","type":"post","link":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/2013\/01\/24\/fonts-para-web\/","title":{"rendered":"Fonts para web"},"content":{"rendered":"

Arm\u00e9 un muestrario de font para web<\/a>, para todo el que necesite mostrar qu\u00e9 tipos de letra pueden verse en su p\u00e1gina web. Para usarlos, hay que usar en la hoja de estilo la propiedad Font-family. Aqu\u00ed un ejemplo para usarlo en p\u00e1rrafos:<\/p>\n

p.estilo1 {\n font-family: Helvetica, Geneva, Arial,\n SunSans-Regular, sans-serif;\n color:#333333;\n }<\/pre>\n
p.estilo2 {\n font-family: Arial Black, sans-serif;\n color:#6e0139;\n }<\/pre>\n
Y despu\u00e9s en el archivo HTML, el tipo de p\u00e1rrafo:<\/p>\n
<p>Este es un p\u00e1rrafo con el estilo de letra Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;<\/p>\n<p>Este es un p\u00e1rrafo con el estilo de letra Arial Black, sans-serif;<\/p><\/pre>\n
El problema de estos fonts es que tienen que estar instalados en la computadora del usuario para que los visualice, por eso se usan Familias de fonts y no un s\u00f3lo tipo de letra. Esta es una captura de pantalla del muestrario en Ubuntu:<\/p>\n
\"Muestrario<\/a><\/p>\n
Y esta es una captura del muestrario en Windows:<\/p>\n
\"Fonts<\/a><\/p>\n
Si queremos usar un font que no est\u00e1 en la lista de est\u00e1ndares, podemos subir los archivos ttf y utilizar @font-face para incluirlo en nuestro listado de fonts:<\/p>\n
@font-face\u00a0{ font-family: feliz; src:url(‘http:\/\/www.blabla.com.ar\/FantasiaSerifA-Normal.otf’);<\/p>\n
font-family: feliz; font-weight: bold; src:url(‘http:\/\/www.blabla.com.ar\/FantasticaSerifA-Bold.otf’);<\/p>\n
font-family: feliz; font-style: italic; src:url(‘http:\/\/www.blabla.com.ar\/FantaseB-BookItalic.otf’); }<\/p>\n
Despu\u00e9s, basta con poner a un p\u00e1rrafo la propiedad font-family con el nuevo font, y listo. El detalle es que Internet Explorer no soporta m\u00e1s que un tipo de fonts, el eot<\/strong> (fuente: w3school<\/a>):<\/p>\n
The @font-face rule is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari. However, Internet Explorer 9 only supports .eot type fonts, while Firefox, Chrome, Safari, and Opera support .ttf and .otf type fonts.<\/p><\/blockquote>\n
Otra alternativa es utilizar los fonts de Google: http:\/\/www.google.com\/webfonts\/# Una vez que elegimos un font, hacemos clic en “quick use”. All\u00ed nos indica qu\u00e9 debemos agregar a nuestro c\u00f3digo y c\u00f3mo usar el font.<\/p>\n
\n
\n
\n
\n
Code: <link href=’http:\/\/fonts.googleapis.com\/css?family=Ledger’ rel=’stylesheet’ type=’text\/css’><\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n
\n
Instructions:\u00a0To embed your Collection into your web page, copy the code as the first element in the\u00a0<head><\/strong>\u00a0of your HTML document. \u00bb See an example<\/a><\/div>\n<\/blockquote>\n<\/div>\n
\n
\n
\n
4. Integrate the fonts into your CSS:<\/h3>\n
The Google Web Fonts API will generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your CSS styles. For example:<\/p><\/blockquote>\n
\n
\n
font-family: ‘Ledger’,\u00a0serif;<\/div>\n<\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Arm\u00e9 un muestrario de font para web, para todo el que necesite mostrar qu\u00e9 tipos de letra pueden verse en su p\u00e1gina web. Para usarlos, hay que usar en la hoja de estilo la propiedad Font-family. Aqu\u00ed un ejemplo para usarlo en p\u00e1rrafos: p.estilo1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; color:#333333; } p.estilo2 { … Continuar leyendo “Fonts para web”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3128","post","type-post","status-publish","format-standard","hentry","category-educacion-tecnologia"],"_links":{"self":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/3128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/comments?post=3128"}],"version-history":[{"count":0,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/3128\/revisions"}],"wp:attachment":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/media?parent=3128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/categories?post=3128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/tags?post=3128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}