
Considerando licencias como:
¿Cómo puedo usar la familia de fuentes Ubuntu en cualquier sitio web sin que el usuario tenga que instalarla?
Cualquier posibilidad de usarlo con herramientas como:http://code.google.com/intl/en-US/apis/webfonts/
Respuesta1
Hay dos métodos con los que puedes incrustar la fuente de Ubuntu en tu sitio web: usando el Directorio de fuentes de Google (preferido) o usando la @font-face
declaración CSS y convirtiendo tus fuentes manualmente.
Usando fuentes web de Google
Ahora puede utilizar la fuente Ubuntu como fuente web de Google. Esto hará que el proceso sea mucho más sencillo. La mayor parte del contenido de esta parte de la respuesta proviene dela respuesta de sladen.
¿Por qué utilizar la API de fuentes de Google es el método preferido?
Usar la API de fuentes de Google es una excelente sugerencia, ya que permite que las fuentes web funcionen automáticamente en todos los navegadores modernos sin tener que preocuparse por los detalles. El uso de la API de fuentes significa que los visitantes siempre verán lael últimoversión del tipo de letra automáticamente.
¿Cómo puedo utilizar la API de fuentes de Google?
Desde el 21 de diciembre de 2010, la familia de fuentes Ubuntu ahora está incluida y se puede implementar desde la API de fuentes de Google. Visite:
Puedes leerla publicación de fuentes web de Googlesobre la noticia, y luego:
Abra el directorio de fuentes de Google: "Ubuntu: usa esta fuente" página
Marque la combinación depesos y estilosen Regular, Cursiva, Negrita y Negrita-Cursiva que necesita para su página web.
Si el valor predeterminado es incorrecto, seleccione elcombinación de idioma/escrituralo que necesita: un sitio web ruso con ejemplos en inglés podría usar "cirílico, latín".
Agregue la
<link>
etiqueta proporcionada<head> ... </head>
en su página HTML o plantillas y agregue el código CSS apropiado entre<style> ... </style>
las etiquetas en su archivo<head>
.Por ejemplo, si estuviera creando un sitio web híbrido ruso/inglés y quisiera usar la fuente como predeterminada para todo el texto, podría agregar el siguiente código entre sus
<head>
etiquetas:<link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=cyrillic,latin' rel='stylesheet' type='text/css' /> <style type="text/css" > body { font-family : 'Ubuntu', sans-serif; } </style>
Notas:
"latín" es elguionen el que están escritos el inglés y muchos otros idiomas europeos y africanos.
"Subconjunto" optimiza los archivos de fuentes enviando solo caracteres para ciertos idiomas, las fuentes pesan alrededor de 44 kB cada una. La cifra de 168 kB que se muestra en este momento es para los más de 1200 glifos como descarga de una única fuente web, y la mayoría no son necesarios para un solo sitio web.
Los archivos de fuentes de Ubuntu se convierten automáticamente al formato correcto para diferentes navegadores; Dependiendo de la marca y la versión, el formato requerido es WOFF
, o . La combinación correcta de CSS es específica para cada solicitud de página y resuelve mágicamente este difícil problema.EOT
SVG
TTF
Usando @font-face
Puede incrustar las fuentes de Ubuntu medianteconvirtiéndolosafuentes WOFF. Luego puedes incrustarlos usando la declaración CSS @font-face. Las fuentes (archivos .ttf) se pueden encontrar en formato /usr/share/fonts/truetype/ubuntu-font-family
.
Por ejemplo, para usar la fuente Ubuntu Regular, convertida en un archivo WOFF, Ubuntu-R.woff, use este código CSS:
@font-face
{
font-family : "Ubuntu-R";
src: url('Ubuntu-R.woff');
}
De manera similar para Ubuntu Bold:
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-B.woff');
font-weight : bold;
}
Ubuntu cursiva:
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-I.woff');
font-style : italic;
}
Ubuntu Negrita Cursiva:
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-BI.woff');
font-weight : bold;
font-style : italic;
}
Esto es apoyado por todosnavegadores recientes.
Consideraciones
Recuerde que algunos usuarios configuran sus navegadores para utilizar un conjunto específico de fuentes y pueden molestarse si se utilizan fuentes personalizadas. Lea también elLicencia de fuente Ubuntupara conocer los términos exactos sobre cómo se puede distribuir la fuente.
Respuesta2
Usar la API de fuentes de Google es una excelente sugerencia, ya que permite que las fuentes web funcionen automáticamente en todos los navegadores modernos sin tener que preocuparse por los detalles. El uso de la API de fuentes significa que los visitantes siempre verán lael últimoversión del tipo de letra automáticamente.
Desde el 21 de diciembre de 2010, la familia de fuentes Ubuntu ahora está incluida y se puede implementar desde la API de fuentes de Google. Visite:
Puedes leerla publicación de fuentes web de Googlesobre la noticia, y luego:
- Abra el directorio de fuentes de Google: "Ubuntu: usa esta fuente" página
- Marque la combinación depesos y estilosen Regular, Cursiva, Negrita y Negrita-Cursiva que necesita para su página web.
- Si el valor predeterminado es incorrecto, seleccione elcombinación de idioma/escrituralo que necesita: un sitio web ruso con ejemplos en inglés podría usar "cirílico, latín".
- Copia y pega eldos líneas de CSSen las secciones
<head> ... </head>
y<style>...</style>
de su página HTML o plantillas.
Notas:
"latín" es elguionen el que están escritos el inglés y muchos otros idiomas europeos y africanos.
"Subconjunto" optimiza los archivos de fuentes enviando solo caracteres para ciertos idiomas; las fuentes pesan alrededor de 44 kB cada una. La cifra de 168 kB que se muestra en este momento es para los más de 1200 glifos como descarga de una única fuente web, y la mayoría no son necesarios para un solo sitio web.
Los archivos de fuentes de Ubuntu se convierten automáticamente al formato correcto para diferentes navegadores; Dependiendo de la marca y la versión, el formato requerido es WOFF
, o . La combinación correcta de CSS es específica para cada solicitud de página y resuelve mágicamente este difícil problema.EOT
SVG
TTF
Respuesta3
La representación de fuentes del lado del servidor (o quizás mejor "representación dinámica de fuentes") ha sido un tema interesante durante bastante tiempo.
Técnicamente, parece lógico que para que una máquina muestre una fuente específica, ya debería estar instalada localmente.
Por otro lado, el diseño web pierde mucho al tener que ceñirse a las básicas/conocidas 'fuentes web'.
CSS2.1 ha realizado algunas mejoras mediante el uso@Perfil delanteroregladeclaración.
Aún no se ha convertido en un estándar, pero eventualmente lo será con CSS3.
Además de eso, ha habido algunos métodos alternativos, como:
Espero que los enlaces proporcionados te den una mejor idea de lo que se puede hacer ;-)