Tecnología

Inicio

Cómo utilizar Fuentes no estándar en un sitio web

Cómo utilizar Fuentes no estándar en un sitio web


Cascading Style Sheets o CSS, es una herramienta que permite a los desarrolladores de sitios web o propietarios para aplicar estilos a cualquiera o todos los elementos de un sitio web HTML. CSS 3, la nueva versión a partir de 2010, le permite subir archivos TTF o OTF a su servidor para que pueda utilizar fuentes no estándar en su página web. Este método le permite una mayor selección de fuentes para personalizar aún más el aspecto de los elementos de la página Web. Incluso los visitantes que no tienen instalada la fuente personalizada podrán verlo en su sitio.

Instrucciones

Subir Font

1 Poner en marcha su programa de FTP y escriba su nombre de usuario, contraseña y la información del servidor en los campos apropiados.

2 Pres "Enter" o haga clic en el botón "Conectar".

3 Vaya a la carpeta, como la carpeta base de su página web, en el panel "servidor remoto" de su programa de FTP. También puede optar por crear una nueva carpeta para las fuentes como "http://yourwebsite.com/fonts."

4 Navegue a la carpeta que contiene el archivo de fuente en el equipo en el panel de "local" de su programa de FTP.

5 Haga doble clic en el archivo de fuente o haga clic y elegir la opción "Subir" para subir el archivo. Nota de la URL, que puede ser similar a "http://yourwebsite.com/fonts/fontname.ttf" si está utilizando una carpeta "Fuentes" y es una fuente TTF.

Editar CSS

6 Haga clic en su página web HTML o archivo CSS externo en su cliente de FTP y seleccione "Descargar". Abra el archivo en el editor de texto.

7 Agregue el siguiente bloque de CSS antes de la etiqueta </ ​​style> en la cabecera del documento HTML:

@Perfil delantero {

font-family: 'nombre de su fuente va aquí';

src: url ( 'http://yourwebsite.com/fonts/fontname.ttf')

}

Cambio "http://yourwebsite.com/fonts/fontname.ttf" a la URL real de su archivo de fuente.

Si se utiliza una hoja de estilo externa (como "style.css"), basta con pegar el bloque de CSS al final del documento.

8 Añadir lo siguiente a la CSS en la cabeza o de estilo externa:

.specialtext {

font-family: 'Nombre de la Fuente'

}

Cambie "Nombre de la Fuente" al nombre real de su fuente. También puede cambiar "specialtext" a cualquier palabra descriptiva. Por ejemplo, es posible que el nombre de "SignatureText" si está utilizando un tipo de letra cursiva para emular una firma.

9 Guarde la página Web o un archivo CSS, abra el menú Archivo y seleccionando "Guardar".

10 Cargar el archivo a su servidor de alojamiento web haciendo doble clic sobre él en el panel local de su cliente FTP o arrastrar y soltar desde su ubicación en el equipo para el panel remoto del programa FTP.

Edición de HTML

11 Descargar y abrir el archivo HTML que desea editar, si es diferente del archivo que contiene el código CSS.

12 Abra el archivo HTML en un editor de texto como el Bloc de notas.

13 Colocar cualquier texto que desea utilizar la fuente no estándar con entre las etiquetas <p class = "specialtext"> y </ p> etiquetas por lo que se ve así:

<P class = "specialtext"> Este texto va a utilizar una fuente no estándar. <P>

14 Cambio "specialtext" si ha cambiado el selector CSS en la hoja de estilo / cabeza.

15 Guardar y cargar el archivo HTML.

Consejos y advertencias

  • Es posible que desee incluir varios tipos de letra estándar en su CSS, como en el siguiente ejemplo en el que "standardfont1" y "standardfont2" son sustitutos de nombres de fuentes estándar real.
  • .specialtext {
  • font-family: 'Nombre de la Fuente', standardfont1, standardfont2; }
  • Puede definir la fuente de los selectores comunes tales como "cuerpo", "div", "p" o "h1" en su CSS si desea que todos los elementos de la página para utilizar la fuente no estándar.
  • Puede aplicar la clase CSS a cualquier elemento de envase que incluye "p", "div" y "span".