html - pagina - meta name keywords
¿Cómo agregar alguna fuente no estándar a un sitio web? (21)
¿Hay alguna manera de agregar alguna fuente personalizada en el sitio web sin usar ... Flash?
Claro, utiliza Silverlight .
¿Hay alguna manera de agregar alguna fuente personalizada en el sitio web sin usar imágenes, Flash u otros gráficos?
Por ejemplo, estaba trabajando en algún sitio web de bodas y estaba encontrando muchas fuentes agradables para ese tema, pero no puedo encontrar la forma correcta de agregar esa fuente en el servidor, y cómo puedo incluir esa fuente con CSS en el HTML? ¿Es posible hacerlo sin gráficos?
Consulte el artículo 50 Herramientas de diseño útiles para tipografías web hermosas para métodos alternativos.
Sólo he usado Cufon . Lo he encontrado confiable y muy fácil de usar, así que me he quedado con él.
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 en texto / fuente estándar si Flash no está instalado.
El estilo está configurado en su CSS, y JavaScript configura el reemplazo de Flash para su texto.
Edición: (Sigo recomendando el uso de imágenes para fuentes no estándar ya que sIFR agrega tiempo a un proyecto y puede requerir mantenimiento).
El artículo Font-face en IE: Hacer que las fuentes web funcionen dice que funciona con los tres navegadores principales.
Aquí hay una muestra que obtuve trabajando: http://brendanjerwin.com/test_font.html
Más discusión está en brendanjerwin.com/development/web/2009/03/03/… .
El camino a seguir es mediante la declaración CSS de @ font-face, que permite a los autores especificar fuentes en línea para mostrar texto en sus páginas web. Al permitir que los autores proporcionen sus propias fuentes, @ font-face elimina la necesidad de depender del número limitado de fuentes que los usuarios han instalado en sus computadoras.
Echa un vistazo a la siguiente tabla:
Como puede ver, hay varios formatos que debe conocer, principalmente debido a la compatibilidad entre navegadores. El escenario en dispositivos móviles no es muy diferente.
Soluciones:
1 - Compatibilidad total con el navegador
Este es el método con el soporte más profundo 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
Sin embargo, las cosas están cambiando en gran medida hacia WOFF , por lo que probablemente te salgas con la suya
@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 últimos navegadores
O incluso simplemente WOFF.
Entonces lo usas así:
body {
font-family: ''MyWebFont'', Fallback, sans-serif;
}
Referencias y lecturas adicionales:
Eso es principalmente lo que necesita saber acerca de la implementación de esta función. Si quieres investigar más sobre el tema, te animo a que eches un vistazo a los siguientes recursos. La mayor parte de lo que pongo aquí se extrae de la siguiente
Esto podría hacerse 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 normales si utiliza las fuentes TrueType-Fonts (TTF) o el formato de fuente abierta de la web (WOFF).
Investigué un poco y desenterré el reemplazo dinámico de texto (publicado el 2004-06-15).
Esta técnica utiliza imágenes, pero parece ser "manos libres". Usted escribe su texto y deja que unos pocos scripts automatizados encuentren y reemplacen automáticamente en la página para usted sobre la marcha.
Tiene algunas limitaciones, pero es probablemente una de las opciones más fáciles (y más compatibles con el navegador) que todas las demás que he visto.
La técnica que el W3C ha recomendado para hacer esto se denomina "incrustación" y está bien descrita por los tres artículos aquí: Incrustar fuentes . En mis experimentos limitados, he encontrado que este proceso es propenso a errores y he tenido un éxito limitado en hacer que funcione en un entorno de múltiples navegadores.
Me temo que los gráficos son tu única opción en este caso.
Monotype recientemente lanzó muchas de sus fuentes junto con un nuevo sistema para usarlas en sus páginas web: http://www.webfonts.fonts.com/
O podrías probar sIFR . Sé que utiliza Flash, pero solo si está disponible. Si Flash no está disponible, muestra el texto original en su fuente original (CSS).
Parece que solo funciona en Internet Explorer, pero una búsqueda rápida en Google de "html embed fonts" da como resultado http://www.spoono.com/html/tutorials/tutorial.php?id=19
Si quieres permanecer en la plataforma (¡y deberías!) Tendrás que usar imágenes, o simplemente usar una fuente estándar.
Puede agregar algunas fuentes a través de Google Web Fonts .
Técnicamente, las fuentes se alojan en Google y las vinculas en el encabezado HTML. Luego, puede usarlos libremente en CSS con @font-face ( lea sobre esto ).
Por ejemplo:
En la sección <head>:
<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 confiable (incluso Smashing Magazine la usa para el título de un artículo ). Sin embargo, hasta ahora no hay tantas fuentes disponibles en el Directorio de fuentes de Google .
Safari e Internet Explorer son compatibles con la regla CSS @ font-face, sin embargo, admiten dos tipos de fuentes incrustadas diferentes. Firefox planea admitir el mismo tipo de Apple pronto. SVG puede incrustar fuentes, pero aún no está ampliamente soportado (sin un complemento).
Creo que la solución más portátil que he visto es usar una función de JavaScript para reemplazar encabezados, etc., con una imagen generada y almacenada en caché en el servidor con la fuente que prefiera, de esa manera simplemente actualice el texto y no tenga que hacerlo. Cosas por ahí en Photoshop.
Si por fuente no estándar, te refieres a la 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 */
}
así que solo necesitarás las fuentes ttf y eot. Algunas herramientas disponibles en línea pueden hacer la conversión.
Pero si desea adjuntar fuentes en un formato no estándar (mapas de bits, etc.), no puedo ayudarlo.
Si tiene un archivo de su fuente, deberá agregar más formatos de esa fuente para otros navegadores.
Para este fin, uso un generador de fuentes como Fontsquirrel que proporciona todos los formatos de fuente y su @ font-face CSS, solo tendrá que arrastrarlo y soltarlo en su archivo CSS.
Si usa ASP.NET, es realmente fácil generar fuentes basadas en imágenes sin tener que instalar realmente (como al 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 .
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>
También es posible usar fuentes WOFF - ejemplo here
@font-face {
font-family: ''Plakat Fraktur'';
src: url(''/resources/fonts/plakat-fraktur-black-modified.woff'') format(''woff'');
font-weight: bold;
font-style: normal;
}
Typeface.js y Cufon son otras dos opciones interesantes. Son componentes de JavaScript que representan datos de fuentes especiales en formato JSON (que puede convertir de los formatos TrueType o OpenType en sus sitios web) a través del nuevo elemento <canvas> en todos los navegadores más nuevos, excepto Internet Explorer y VML en Internet Explorer.
El principal problema con ambos (a partir de ahora) es que seleccionar texto no funciona o al menos funciona de manera bastante incómoda.
Aún así, es muy agradable para los titulares. Texto del cuerpo ... No lo sé.
Y es sorprendentemente rápido.
Typeface.js JavaScript Way:
Con typeface.js puede incrustar fuentes personalizadas en sus páginas web para que no tenga que representar texto en imágenes
En lugar de crear imágenes o usar flash solo para mostrar el texto gráfico de su sitio con la fuente que desea, puede usar typeface.js y escribir en HTML y CSS, como si sus visitantes tuvieran la fuente instalada localmente.