Mejore su sitio con fuentes personalizadas

categoría Los medios de comunicación de Internet y sociales / Diseño y desarrollo web / IPhone & iPad diseño web

Para la mayoría de los diseñadores de páginas web, la fuente de las fuentes hace no

Conteúdo

rebosando. Las fuentes 11 integrados en el iOS de Apple, que se muestra en esta figura, son lamentablemente inadecuados. Diseñadores graves pasan horas buscando sólo la fuente correcta para transmitir la sensación de que quieren provocar en un diseño. Es por eso que muchos diseñadores están emocionados de que CSS 3 ofrece una nueva solución.

imagen0.jpg

los @Perfil delantero opción, nueva en CSS 3, le permite conectar a cualquier fuente que está disponible desde un servidor web. Añadir un poco de sombra y otros elementos de estilo con CSS, y usted puede crear fantásticos efectos de fuente sin tener que recurrir a la vieja solución para fuentes limitadas: guardar las imágenes de texto con estilo creado en Photoshop.

Después de generar el código que necesita sobre Font Squirrel, puede empezar a utilizar el tipo de letra en sus páginas web en unos sencillos pasos. El siguiente ejemplo muestra el código que ves si ejecuta una fuente personalizada a través del generador de fuentes de ardilla.

En primer lugar, agrega la fuente a la zona de la cabeza de su página utilizando esta sintaxis:

@ font-face {font-family: 'GoodDogRegular'-src: url (' GoodDog-webfont.eot ') - src: url (' GoodDog-webfont.eot IEFix?) formato ('EOT), url (' GoodDog-webfont.woff ') formato (' woff '), url (' GoodDog-webfont.ttf ') formato (' True Type '), url (' GoodDog-webfont.svg # webfontx1QlgLst ') formato (' svg ') - font-weight:-font-estilo de la normalidad: normal-}

A continuación se incluye la fuente en una regla de estilo, y se puede aplicar a cualquier texto en su página.

.stylename {font-family: 'GoodDogRegular'-}

Siga estos pasos para añadir cualquiera de las fuentes en el directorio de fuentes de Google a sus páginas:

  1. Abra cualquier navegador web (recomendamos Safari: la versión de escritorio es más cercano a la versión de iOS) y visitar Google Web Fuentes.

  2. Haga clic en el nombre de cualquier fuente para seleccionar la fuente que desea utilizar en su diseño.

  3. Haga clic en la pestaña de utilizar esta fuente en la parte superior de la página para generar el código que necesita, como se muestra.

    image1.jpg

  4. Copiar el enlace en el primer campo y pegarlo en el área de la cabeza de su página web.

  5. Copie el código de la familia de la fuente del segundo campo de la página de la fuente Google Directorio Font y pegarlo en la hoja de estilos CSS de su página web.

    En el ejemplo mostrado, se ve que Google ha generado la regla en un estilo para el

    etiqueta. Puede utilizar este código para crear un estilo para el

    etiqueta con el tipo de letra que ha seleccionado, pero usted también tiene la opción de añadir la regla de fuente para cualquier otro estilo CSS.

  6. Aplicar la regla de texto en su página web.

    Si utiliza la totalidad

    regla prestado por Google, cualquier texto formateado con el

    pantallas de etiqueta en esa fuente. Si crea un nuevo estilo de clase o ID con la fuente como parte de la regla, aplicar el estilo a su texto para la fuente a aparecer, al igual que usted tendría que solicitar cualquier otro estilo.



Artículos Relacionados

Sobre el autor
Cómo cambiar la fuente del texto en Word 2016 Cómo cambiar la fuente del texto en Word 2016

Word 2016 almacena los comandos más comunes de formato de texto de la ficha Inicio, en el grupo Fuente, como se muestra. El atributo base del texto es su tipo de letra, o fuente. El tipo de letra establece la forma en que el texto se ve y su estilo…

Las hojas de estilo en cascada y SharePoint 2010 Las hojas de estilo en cascada y SharePoint 2010

Hojas de Estilo en Cascada (CSS) pueden ser muy sofisticado. CSS es una manera de separar apariencia del contenido. Estas reglas de estilo a menudo se colocan en el área de la cabeza de un documento HTML o en un archivo separado por completo que…

Cómo cambiar la fuente en Word 2007 Cómo cambiar la fuente en Word 2007

Word 2007 hace que sea fácil cambiar las fuentes en el documento. Diferentes fuentes dan un aspecto diferente a las palabras que componen el texto en general. Agrandar1Mostrar el menú Fuentes.En la ficha de escritura, en el grupo Fuente, haga clic…

Cómo establecer la familia de fuentes en HTML5 y CSS3 páginas web Cómo establecer la familia de fuentes en HTML5 y CSS3 páginas web

Para asignar una familia de fuentes a una parte de la página, utilice algún nuevo CSS. Como ejemplo, esta página tiene el título establecido en Comic Sans MS. Si esta página es vista en una máquina Windows, por lo general, muestra el tipo de…

Cómo utilizar fuentes incorporadas para su HTML5 y CSS3 páginas web basadas Cómo utilizar fuentes incorporadas para su HTML5 y CSS3 páginas web basadas

Aunque un desarrollador web HTML5 puede sugerir cualquier fuente de una página web, los ficheros son tradicionalmente un activo a nivel de cliente. Si el cliente no tiene instalada la fuente, ella no lo verá. Afortunadamente, CSS3 soporta una…

Cómo dar formato a texto en su sitio web con el pi frambuesa Cómo dar formato a texto en su sitio web con el pi frambuesa

Puede cambiar algunas propiedades para alterar la forma en el texto de su sitio web se ve en la pantalla con el Raspberry Pi. Cualquier cosa que usted puede agregar a hacer su sitio web visualmente más atractivo animará a la gente a seguir…

¿Cómo cambiar el tamaño de fuente en NaturallySpeaking ¿Cómo cambiar el tamaño de fuente en NaturallySpeaking

Para cambiar el tamaño de la fuente desde dentro NaturallySpeaking, debe conocer el tamaño de punto que desee. Si, por ejemplo, quiere cambiar un poco de texto a 18 puntos, puede seleccionar y decir" Set Tamaño 18. "" formato Tamaño 18. "En la…

Cómo dar formato a fuentes en iBooks autor Cómo dar formato a fuentes en iBooks autor

iBooks Autor soporta una variedad de tipos de letra (popularmente llamada fuentes) Para el texto. iBooks Autor puede utilizar solamente las fuentes en su menú Fuentes, que son las fuentes disponibles en iBooks en el iPad. (Apple cambia…

Para las personas mayores: dar formato al texto en un documento de Microsoft Works Para las personas mayores: dar formato al texto en un documento de Microsoft Works

Puede dar formato al texto en un documento de Microsoft Works con el fin de cambiar la forma en que se ve. Formato de texto para cambiar su tamaño, aplicar efectos tales como negrita o cursiva o cambiar su fuente (estilo de letra).Trate de no usar…

Cómo incrustar fuentes en su blog Cómo incrustar fuentes en su blog

En un momento dado, de texto en vivo se limitaba al uso de fuentes compatibles con Web. Por suerte, ahora tiene opciones mucho más interesantes en cuanto a las fuentes, gracias a la tecnología de fuentes, la incrustación, lo que le permite…

¿Cómo elegir la mejor fuente en css3 ¿Cómo elegir la mejor fuente en css3

Texto, como una presentación abstracta de conceptos concretos, ideas y objetos, requiere fuentes de presentación. La fuente elegida en CSS3 para el texto hace a menudo tanto para transmitir una idea como el texto mismo. Pasa algún tiempo buscando…

Cómo el estilo de párrafos, encabezados y pies de página con css3 Cómo el estilo de párrafos, encabezados y pies de página con css3

Cuando se diseñará párrafos, encabezados y pies de página, la mayoría del trabajo se puede lograr de forma automática mediante la creación de estilos de etiquetas Redefinir para el etiqueta y sin embargo muchas etiquetas de título que va a…

» » » » Mejore su sitio con fuentes personalizadas