¿Cómo agregar alguna fuente no estándar a un sitio web?

https://stackoverflow.com/questions/107936

01-07-2019
|

Pregunta

¿Hay alguna manera de agregar alguna fuente personalizada en el sitio web sin usar imágenes? Destello ¿O algún otro gráfico?

Por ejemplo, estaba trabajando en un sitio web de bodas y encontré muchas fuentes bonitas para ese tema, pero no puedo encontrar la manera correcta de agregar esa fuente en el servidor, y ¿cómo puedo incluir esa fuente con CSS? en el HTML?¿Es posible prescindir de los gráficos?

Solución

Esto se podría hacer a través de CSS:

<style type="text/css">
@font-face {
    font-family: "My Custom Font";
    src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
    font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>

Es compatible con todos los navegadores habituales si utiliza fuentes TrueType (TTF) o el formato de fuente abierto web (WOFF).

Otros consejos

Puede agregar algunas fuentes a través de Fuentes web de Google.

Técnicamente, las fuentes están alojadas en Google y las vinculas en el encabezado HTML.Luego, puedes usarlos libremente en CSS con @font-face (Lee sobre ello).

Por ejemplo:

En el <head> sección:

 <link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

Luego en CSS:

h1 { font-family: 'Droid Sans', arial, serif; }

La solución parece bastante fiable (incluso Smashing Magazine lo usa para el título de un artículo.).Sin embargo, hasta el momento no hay tantas fuentes disponibles en Directorio de fuentes de Google.

El camino a seguir es utilizar la declaración CSS @font-face, que permite a los autores especificar fuentes en línea para mostrar texto en sus páginas web.Al permitir a los autores proporcionar sus propias fuentes, @font-face elimina la necesidad de depender del número limitado de fuentes que los usuarios han instalado en sus computadoras.

Eche un vistazo a la siguiente tabla:

enter image description here

Como puede ver, hay varios formatos que necesita conocer principalmente debido a la compatibilidad entre navegadores.El escenario en los dispositivos móviles no es muy diferente.

Soluciones:

1 - Compatibilidad total con el navegador

Este es el método que cuenta con el mayor apoyo posible en este momento:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

2 - La mayor parte del navegador

Las cosas son moviéndose fuertemente hacia WOFF Sin embargo, probablemente puedas salirte con la tuya:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

3 - Sólo los navegadores más recientes

O incluso simplemente WOFF.
Luego lo usas así:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Referencias y lecturas adicionales:

Eso es principalmente lo que necesita saber sobre la implementación de esta función.Si desea investigar más sobre el tema, le recomiendo que consulte los siguientes recursos.La mayor parte de lo que pongo aquí está extraído de lo siguiente

Si por fuente no estándar te refieres a una fuente personalizada de un formato estándar, así es como lo hago y funciona para todos los navegadores que he comprobado hasta ahora:

@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}

entonces sólo necesitarás las fuentes ttf y eot.Algunas herramientas disponibles en línea pueden realizar la conversión.

Pero si desea adjuntar una fuente en un formato no estándar (mapas de bits, etc.), no puedo ayudarlo.

Descubrí que la forma más fácil de tener fuentes no estándar en un sitio web es usar sifr

Implica el uso de un objeto Flash que contiene la fuente, pero se degrada muy bien a texto/fuente estándar si Flash no está instalado.

El estilo se establece en su CSS y JavaScript configura el reemplazo de Flash para su texto.

Editar:(Aún recomiendo usar imágenes para fuentes no estándar, ya que sIFR agrega tiempo a un proyecto y puede requerir mantenimiento).

El artículo Fuente en IE:Hacer que las fuentes web funcionen dice que funciona con los tres navegadores principales.

Aquí hay una muestra que tengo funcionando: http://brendanjerwin.com/test_font.html

Más discusión está en Incrustar fuentes.

Tipo de letra.js y Cufón Son otras dos opciones interesantes.Son componentes de JavaScript que representan datos de fuentes especiales en formato JSON (que puede convertir desde Tipo verdadero o De tipo abierto formatos en sus sitios web) a través del nuevo elemento <canvas> en todos los navegadores más nuevos excepto Internet Explorer y a través de VML en Internet Explorer.

El principal problema con ambos (a partir de ahora) es que la selección de texto no funciona o al menos funciona de forma bastante incómoda.

Aún así, es muy bueno para los titulares.Cuerpo de texto...No sé.

Y es sorprendentemente rápido.

O podrías intentarlo sifr.Sé que usa Flash, pero sólo si está disponible.Si Flash no está disponible, muestra el texto original en su fuente original (CSS).

¿Hay alguna manera de agregar alguna fuente personalizada en el sitio web sin usar...Destello ?

Claro, usa Luz plateada.

La técnica que el W3C ha recomendado para hacer esto se llama "incrustación" y está bien descrita en los tres artículos aquí: Incrustar fuentes.En mis limitados experimentos, encontré que este proceso es propenso a errores y he tenido un éxito limitado en hacerlo funcionar en un entorno de múltiples navegadores.

Tanto Safari como Internet Explorer admiten la regla CSS @font-face, sin embargo, admiten dos tipos de fuentes incrustadas diferentes.Firefox planea admitir el mismo tipo que Apple pronto.SVG puede incrustar fuentes, pero aún no es tan compatible (sin un complemento).

Creo que la solución más portátil que he visto es usar una función de JavaScript para reemplazar títulos, etc.con una imagen generada y almacenada en caché en el servidor con la fuente que elijas, de esa manera simplemente actualizas el texto y no tienes que complicarte en Photoshop.

Si usa ASP.NET, es realmente fácil generar fuentes basadas en imágenes sin tener que instalar (como agregar a la base de fuentes instalada) fuentes en el servidor usando:

PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];

y luego dibujar con esa fuente en un Graphics.

Parece que sólo funciona en Internet Explorer, pero una búsqueda rápida en Google de "fuentes incrustadas HTML" arroja http://www.spoono.com/html/tutorials/tutorial.php?id=19

Si desea permanecer independiente de la plataforma (¡y debería hacerlo!), tendrá que usar imágenes o simplemente usar una fuente estándar.

Investigué un poco y desenterré Reemplazo de texto dinámico (publicado el 15 de junio de 2004).

Esta técnica utiliza imágenes, pero parece ser "manos libres".Usted escribe su texto y deja que algunos scripts automatizados busquen y reemplacen automáticamente la página sobre la marcha.

Tiene algunas limitaciones, pero probablemente sea una de las opciones más fáciles (y más compatible con el navegador) que todas las demás que he visto.

También es posible utilizar fuentes WOFF - ejemplo aquí

@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
 }

Simplemente proporcione el enlace a una fuente real como esta y estará listo para comenzar.

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat'   rel='stylesheet'>
<style>
body {
font-family: 'Montserrat';font-size: 22px;
}
</style>
</head>
<body>

<h1>Montserrat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>


</body>
</html>

Manera de JavaScript de Typeface.js:

Con tipos de tipos

En lugar de crear imágenes o usar Flash solo para mostrar el texto gráfico de su sitio en la fuente que desee, puede usar TypeFace.js y escribir en HTML y CSS simples, como si sus visitantes tuvieran la fuente instalada localmente.

http://typeface.neocracy.org/

Monotype lanzó recientemente muchas de sus fuentes junto con un nuevo sistema para usarlas en sus páginas web: http://www.webfonts.fonts.com/

ver el articulo 50 herramientas de diseño útiles para una hermosa tipografía web para métodos alternativos.

solo he usado Cufón.Lo encontré confiable y muy fácil de usar, así que me quedé con él.

Si tiene un archivo de su fuente, deberá agregar más formatos de esa fuente para otros navegadores.

Para ello utilizo un generador de fuentes como ardilla de fuente proporciona todos los formatos de fuente y su CSS @font-face, solo necesitarás arrastrarlo y soltarlo en tu archivo CSS.

Me temo que los gráficos son tu única opción en este caso.

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow