html - una - meta tags ejemplos




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

¿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?




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


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.



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).


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 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 .


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.







font-face