En general, se debe utilizar fuentes estándar para el contenido principal de la página web HTML 5 y CSS 3, por lo que tiene un conjunto limitado de tipos de letra no es un problema tan grande. A veces, sin embargo, que desea utilizar fuentes en sus titulares. Puede utilizar un editor gráfico, como GIMP, para crear imágenes basadas en texto y luego incorporarlas en sus páginas.

Aquí está el proceso para usar una fuente especial:

1. Planificar su página.

   Cuando se utiliza gráficos, se pierde un poco de flexibilidad. Usted necesita saber exactamente cuáles deben ser los titulares. También es necesario saber qué título se mostrará en qué nivel. En lugar de confiar en el navegador para visualizar sus titulares, va a crear gráficos en su herramienta gráfica y colocarlos directamente en la página.

2. Crear sus imágenes.

   Puede la maravillosa característica de Logos en GIMP (elija Xtns &# 10153- Script-fu &# 10153- logotipos) para crear su texto.

3. Especificar los tamaños de fuente directa.

   Video: Galería de Fotos con Html5 - Css3 y javascript - Código Fuente en GitHub

   En la imagen, tiene sentido para especificar los tamaños de fuente en píxeles porque aquí se está hablando realmente de un número específico de píxeles. Va a crear “virtual de texto” en su editor de fotos, por lo que el texto sea el tamaño que queramos que sea en la página terminada.

4. Utilizar cualquier fuente que desee.

   Usted no tiene que preocuparse de si el usuario tiene la fuente porque no se va a enviar el tipo de letra, sólo una imagen compuesta con la fuente.

5. Crear una imagen separada para cada titular.

   Video: tutorial html y css | insetar fuente (tipografia) desde google fonts

   Este ejercicio en particular tiene dos imágenes - una cabecera de nivel 1 y nivel 2. Debido a que va a crear imágenes directamente, le toca a usted hacer un seguimiento de cómo la imagen comunicará su nivel de titular.

6. Considere el nivel de titular.

   Asegúrese de que el nivel del título 2 valores se ven un poco más pequeño o menos hecho hincapié en que el nivel 1. Es decir, si tiene imágenes que se van a utilizar en un entorno rúbrica 1, deben utilizar un tipo de letra más grande que las imágenes que se van a utilizar en una menos enfatizado nivel de partida. Por lo general, esto se hace mediante el ajuste del tamaño de la fuente en las imágenes.

7. Creación de la página de la manera habitual.

   Después de crear estas imágenes de la especialidad, construir una página web normal. Poner etiquetas y en exactamente los mismos lugares que normalmente tiene.

8. Poner etiquetas dentro de las rúbricas.

   En lugar de texto ordinario, colocar etiquetas de imagen dentro de las etiquetas y. Ver la próxima imageTitles.html código si estás un poco confundido.

9. Poner el texto en el título alt atributo.

   los alt atributo es especialmente importante aquí, porque si el usuario tiene de gráficos desactivada, el texto sigue apareciendo como un título debidamente estilo. Las personas con conexiones lentas ver el texto antes de la carga de imágenes, y las personas que utilizan lectores de texto todavía se puede leer el texto alternativo de la imagen.

Aquí está el código utilizado para generar las cabeceras basadas en imágenes:

Esta página describe las vacas famosas de la historia
Video: Como poner menú de imágenes en carrusel en un blog (Carousel Slider jquery)
La mayoría de las personas no son conscientes de que el ganado en realidad tookpart en la batalla. No lo hicieron, por supuesto. Acabo de inventarlo.

Esta técnica es un buen compromiso entre los gráficos personalizados y HTML ordinaria de la siguiente manera:

• Tiene un gran control de sus imágenes. Si usted es hábil con su herramienta de gráficos, se puede hacer cualquier tipo de imagen que desea actuar como un titular. Hay literalmente no hay límite a excepción de su habilidad y creatividad.

• La página mantiene su estructura. Todavía tiene las etiquetas de encabezado en su lugar, por lo que es fácil ver que quiere decir para una imagen en particular para actuar como un titular. Todavía se puede ver la organización de la página en el código HTML.

• Tiene texto de repliegue. los alt atributos se activará si no se pueden visualizar las imágenes.

• El significado semántico de los titulares de imagen se conserva. los alt etiquetas proporcionan otra gran característica. Si se van replicando el texto de la imagen, este texto sigue estando disponible para los lectores de pantalla y los motores de búsqueda, por lo que el texto no está enterrado en la imagen.

Esta técnica es ideal para los titulares u otras áreas, pero se dio cuenta de que el texto de los titulares se repitió en el etiqueta. Esto es importante porque usted no quiere perder el texto. Motor de búsqueda de herramientas y lectores de pantalla necesitan el texto.

No tener la tentación de utilizar esta técnica para grandes cantidades de texto del cuerpo. Si lo hace, causa algunos problemas:

• El texto ya no se puede buscar. Los motores de búsqueda no pueden encontrar texto si se entierra en imágenes.

• El texto es más difícil de cambiar. No puede actualizar su página con un editor de texto. En su lugar, usted tiene que descargar la imagen, modificarlo y subirlo de nuevo.

• Imágenes requieren un mayor ancho de banda que el texto. No utilice imágenes si no incrementan sustancialmente su página. Se puede hacer en el caso de algunas imágenes de rumbo, pero es más difícil de justificar que su página entera almacena como una imagen sólo para usar una fuente en particular.