Tabla de contenidos
Web fonts (online) vs archivos de fuente
La mejor opción y la más recomendada por Google es la inserción de los enlaces <link> provistos por Google Fonts para enlazar las fuentes.
Por contra, el uso de archivos implica que el usuario debe descargarse la fuente de nuestro servidor antes de que se muestre. [developers.google.com] Las fuentes servidas por la API de fuentes de Google se comprimen automáticamente para una descarga más rápida, y una vez descargadas se almacenan en caché en el navegador y se reutilizan en cualquier otra página web que utilice la API de fuentes de Google.
Inserción de Web fonts mediante código
Cuando se trata de insertar una fuente presente en Google Fonts, el proceso es sumamente sencillo. Una vez encontrada la que nos interesa, la seleccionamos, y al hacerlo aparece una subventana más pequeña que contendrá todas las fuentes que vayamos seleccionando.
En esta subventana, GF nos muestra el código necesario a insertar, en el <head> de la página web/documento HTML, del estilo de:
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">…y en el lugar en el que corresponda al CSS (en línea, en un fichero CSS aparte, etc.):
font-family: 'Roboto', sans-serif;
Descarga e instalación de fuentes en un PC
Es perfectamente posible descargar fuentes de Google Fonts. Para ello, una vez seleccionada, en la subventana pulsar sobre el icono superior derecho en forma de flecha, y Donwnload. Una vez en el equipo, basta abrir el archivo y pulsar sobre instalar.
Utilizar cualquier fuente en la web, con la regla @font-face
La regla HTML @font-face nos libera de la restricción de las web fonts, permitiéndonos usar cualquier fuente de la que dispongamos, indicando su ubicación.
En @font-face indicamos las propiedades de la fuente:
<style>
@font-face {
font-family: miFuente;
src: url(qe2_light.woff);
}
div {
font-family: miFuente;
}
...
</style>
<body>
<div></div>
...
<body>Licencias de las fuentes
[developers.google.com] Las fuentes de código abierto en el catálogo de Google Fonts se publican bajo licencias que nos permiten usarlas en cualquier sitio web, ya sea comercial o personal. [/]
El uso «en cualquier web» se entiende como un uso «normal» de la fuente. El permiso no incluye algo que implique redistribuir la fuente como un trabajo propio.
En cualquier otro caso diferente de Google Fonts, consultar siempre la licencia bajo la cual se encuentra una fuente.
Caracteres Unicode y ASCII
El conjunto de caracteres ASCII es un subconjunto de Unicode. Debido a esto, los códigos 0-128 tienen el mismo significado en ASCII y en Unicode. .
Los caracteres Unicode generalmente no caben en un byte (8 bits). Debido e esto, hay muchas maneras de almacenar los caracteres Unicode en secuencias de bytes, como UTF-32 y UTF-8.
En la web podemos usar los códigos de caracteres para representar dicho carácter. Un ejemplo práctico de esto sería la personalización de las viñetas de las listas (<ul><li></li></ul>)
Símbolos UTF-8
Podemos usar la entidad, cadena de texto asociada al carácter y, si no la tiene, la referencia decimal o hexadecimal.
- ☉: Dec 9737, Hex 2609 , código HTML ☉
- ♚: Dec 9818 Hex 265A código HML ♚
Ejemplo del código con lista de viñetas personalizadas
<ul>
<li style="list-style-type: none;"><span style="font-size: 26px;">☉</span>: Dec 9737, Hex 2609 , código HTML &#9737;</li>
<li style="list-style-type: none;"><span style="font-size: 26px;">♚</span>: Dec 9818 Hex 265A código HML &#9818;</li>
</ul>Manipulación de textos
Escritura tabulada
Ejemplo de escritura tabulada usando la etiqueta <span> y código CSS:
0:00 ¿Qué es Covid-19 y Sars-COV-2? ¿Es el SARS-CoV-2 el primer coronavirus que existe?
5:33 ¿Qué manifestaciones clínicas, radiográficas y de laboratorio presentan los contagiados por el virus SARS-CoV-2 (enfermedad COVID-19)?
10:48 ¿Cuál es el curso evolutivo de la COVID-19: Pronóstico, evolución postinfecciosa y secuelas?
<p><span style="width: 50px; display: inline-block;">0:00</span> ¿Qué es Covid-19 y Sars-COV-2? ¿Es el SARS-CoV-2 el primer coronavirus que existe?<br>
<span style="width: 50px; display: inline-block;">5:33</span> ¿Qué manifestaciones clínicas, radiográficas y de laboratorio presentan los contagiados por el virus SARS-CoV-2 (enfermedad COVID-19)?<br>
<span style="width: 50px; display: inline-block;">10:48</span> ¿Cuál es el curso evolutivo de la COVID-19: Pronóstico, evolución postinfecciosa y secuelas?</p>Tablas
<table style="width:100%">
<caption>Gastos mensuales</caption> <!-- Agrega un título/leyenda a la tabla -->
<tr>
<th>Concepto</th>
<th>Cantidad</th>
</tr>
<tr>
<td>Informática</td>
<td>1200</td>
</tr>
<tr>
<td>Secretaría</td>
<td>1100</td>
</tr>
</table>Recursos
[w3schools.com] Propiedades CSS de las fuentes
Deja una respuesta