Fuentes web usando CSS

CSS | Las fuentes web : En este tutorial, vamos a aprender cómo utilizar fuentes web en HTML con CSS (Cascading Style Sheet) .

CSS | Las fuentes web

fuentes web permiten a las personas a utilizar fuentes que no están pre-instalados en sus ordenadores. Cuando desee class una fuente en particular, simplemente include el archivo de fuente de su navegador y se descargará.

Sus fuentes están especificados dentro de la regla CSS @ font-face .

En esta regla en primer lugar, especificar el nombre de la fuente que desea utilizar y seleccione el archivo de fuente.

web diferentes formatos de fuente

  1. fuentes TrueType (TTF) :
    Este es un tipo de letra estándar desarrollado por Apple y Microsoft a finales de 1980. TrueType es el más comúnmente utilizado formato de fuente include tanto el Mac OS y sistemas operativos Microsoft Windows.
  2. fuentes OpenType (OTF) :
    Este es un formato class fuentes de la computadora escalables desarrollado por Microsoft. Las fuentes OpenType son ampliamente utilizados en la actualidad en las principales plataformas informáticas.
  3. Web Open Font Format (WOFF) :
    Es un uso for formato de fuente en páginas web. Fue desarrollado en 2009. Este formato de fuente es esencialmente OpenType o TrueType con compresión y metadatos adicionales. Su objetivo es apoyar la distribución de la fuente entre un servidor y un cliente en una red con limitaciones de ancho de banda.
  4. SVG Fuentes / Formas :
    Estas fuentes permiten SVG para ser utilizado como glifos al mostrar texto. También puede aplicar CSS a documentos SVG y para los documentos de texto SVG la regla @ font-face se puede aplicar.
  5. Embedded OpenType Fuentes (EOT) :
    fuentes EOT diseñados por Microsoft son una forma compacta de las fuentes OpenType utilizadas como fuentes incrustadas en las páginas web.

Sintaxis:

@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}

Nota: Utilice siempre letras for inferiores for fuente de URL.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
* {
font-family: myFirstFont;
}
</style>
</head>
<body>
<div>
This is a web font i wish to include in my browser.
</div>
</body>
</html>

salida

Web Fonts using CSS - 4

En el ejemplo anterior, un sansation_light fuente web se utiliza. En lugar, hemos especificado la ubicación directa de la fuente como si estuviera en nuestra carpeta que contiene el archivo case es necesario utilizar la ubicación correcta del archivo de la fuente para añadirlo a su sitio web. El uso de un URL directa también es posible.

CSS Fuente Descriptores

  • font-family : Se utiliza para definir el nombre de la fuente que desea utilizar.
  • src : Se utiliza para especificar la dirección URL de la fuente web.
  • font-stretch : Se utiliza para especificar cómo se debe estirar la fuente. Algunos valores son normales , condensada , ultra condensada , etc.
  • font-style : Se utiliza para especificar el estilo que desea utilizar for la fuente. Hay tres valores: normales , cursiva y oblicua .
  • font-weight : Se utiliza para definir la constancia de la fuente utilizada. Sus valores son normales y negrita .


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *