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




tags ejemplos (18)

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


Answers

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>

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.

Typeface.js



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.


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


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.



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.


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

Claro, utiliza Silverlight .


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


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


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


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.


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.


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 .


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.


Deberías mirar a BEM .

Teoría

BEM es un intento de proporcionar un conjunto de instrucciones para organizar y nombrar los selectores css en un intento de hacer que las cosas sean más reutilizables y modulares y para evitar choques entre selectores del tipo que a menudo llevan al código de espagueti y los dolores de cabeza de especificidad.

Cuando se usa correctamente, en realidad tiene algunos efectos muy positivos.

  • Los estilos hacen lo que esperas cuando se agregan a un elemento
  • Los estilos no se filtran y afectan solo a lo que se agregan
  • Los estilos están completamente desacoplados de la estructura del documento.
  • Los estilos no necesitan ser forzados a pasar por encima de otros

BEM funciona bien con SASS para llevar un estilo casi orientado a objetos a CSS. Puede crear archivos modulares, que controlan la visualización de un único elemento de la interfaz de usuario y contienen variables, como colores y 'métodos', como la forma en que se manejan los elementos internos. Si bien un programador de OO incondicional se resiste a esta idea, de hecho, los conceptos aplicados aportan muchas de las partes más agradables de las estructuras de OO, como la modularidad, el acoplamiento flojo y la cohesión estrecha y la reutilización sin contexto. Incluso puede construir de una forma que se parezca a un objeto encapsulado usando Sass y el &operador .

Un artículo más detallado de la revista Smashing se puede encontrar aquí ; y uno de Harry Roberts, de CCS Hechicería (que cualquier persona involucrada en CSS debe tener una lectura de) está aquí .

En la práctica

He usado esto varias veces, además de haber usado SMACSS y OOCSS, lo que significa que también tengo algo para compararlos. También he trabajado en algunos grandes desastres, a menudo de mi propia creación, sin experiencia.

Cuando uso BEM en el mundo real, amplío la técnica con un par de principios adicionales. Utilizo clases de utilidad, un buen ejemplo es una clase envoltura:

.page-section {
    width: 100%;
}
@media screen and (min-width: 1200px) {
    margin: 0 auto;
    width: 1200px;
}

Y también confío un poco en la cascada y la especificidad. Aquí, el módulo BEM sería .primary-boxy .headersería el contexto para una anulación específica

.header {
  .primary-box {
    color: #000;
  }
}

(Hago todo lo posible para que todo sea lo más genérico y libre de contexto posible, lo que significa que un buen proyecto casi todo está en los módulos que son reutilizables)

Un último punto que destacaría aquí es que, por pequeño que sea tu proyecto, aunque parezca poco complejo, deberías hacerlo desde el principio, por dos razones:

  • los proyectos aumentan en complejidad, por lo que es importante sentar las bases, css incluido
  • Incluso un proyecto que parece simple porque está construido en WordPress tiene poco JavaScript todavía puede ser muy complejo en el CSS. De acuerdo, no tiene que hacer ninguna codificación del lado del servidor, por lo que esa parte es simple, pero el folleto lleva la parte delantera. tiene veinte módulos y tres variaciones de cada uno: ¡tienes algunos css muy complejos allí!

Componentes web

En 2015 estamos empezando a mirar los componentes web. Todavía no sé mucho sobre esto, pero buscan unir todas las funcionalidades de front-end en módulos independientes, intentando efectivamente aplicar el tipo de principios de BEM al front-end como un todo y se componen de componentes dispersos pero totalmente acoplados. elementos como los fragmentos de DOM, Js (MVC) y CSS que todos construyen el mismo widget UI.

Al hacer esto, abordarán algunos de los problemas originales que existen con css, que hemos tratado de resolver con cosas como BEM, mientras que en el camino hacen que algunas de las otras arquitecturas frontales estén más cuerdas.

Hay algunas lecturas adicionales here y también un marco de polímero aquí que vale la pena ver

Finalmente

También creo que esta es una excelente y moderna guía de css mejor diseñada, diseñada específicamente para evitar que los grandes proyectos css se ensucien. Trato de seguir la mayoría de estos.





html css fonts font-face