Cambio de fuente en CSS

CSS | propiedad border: Aquí, vamos a aprender acerca de la propiedad frontera en CSS con ejemplos .

propiedades de fuente CSS

propiedades de fuente en CSS se utiliza para definir el tipo de letra familia , osadía , tamaño , y el estilo de de un texto.

Sintaxis: propiedad

    Element { 
font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];
}

font-style

La propiedad font-style en CSS se utiliza para definir el estilo de la fuente utilizada class el texto.

En general, hay tres tipos:

  1. cursiva
  2. oblicua
  3. normal

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
p.p1 {
font-style: normal;
}
p.p2 {
font-style: italic;
}
p.p3 {
font-style: oblique;
}
</style>
</head>
<body>
<p class="p1">Hello! Welcome to Include Help.</p>
<p class="p2">Hello! Welcome to Include Help.</p>
<p class="p3">Hello! Welcome to Include Help.</p>
</body>

propiedad de salida

Changing font in CSS - 4

tamaño de fuente

La propiedad font-size se da en % , px , em , o cualquier otra medida CSS válido. El uso de píxeles, puede utilizar la herramienta de zoom para cambiar el tamaño de la página entera.

Ejemplo:

<!DOCTYPE html>
<head>
<style>
h3 {
font-size: 40px;
}
</style>
</head>
<html>
<body>
<h3>Hello! Welcome to include Help.</h3>
</body>
</html>

salida

Changing font in CSS - 5

El interior de texto & lt; h3 & gt; será 40px de tamaño.

propiedad font-family

Esta es for definir el nombre de la familia.

Puede comenzar con la fuente que desea, y terminar con una familia genérica si no hay otras fuentes están disponibles, el navegador recoge una fuente similar en la familia genérica.

Ejemplo:

<!DOCTYPE html>
<head>
<style>
p {
font-weight: bold;
font-size: 20px;
font-family: Arial, sans-serif;
}
</style>
</head>
<html>
<body>
<p>Hello! Welcome to include Help</p>
</body>
</html>

salida

Changing font in CSS - 6

propiedad de fuente-variante

propiedad de fuente-variante en la CSS se utiliza para establecer la variante del texto normal o small-caps.

Ejemplo:

<!DOCTYPE html>
<head>
<style>
.element-one {
font-variant: normal;
}
</style>
</head>
<html>
<body>
<p class="element-one">Hello! Welcome to include Help.</p>
</body>
</html>

salida

Changing font in CSS - 7

La fuente taquigrafía

Usted puede tener todos sus estilos de fuente en un solo elemento con el abreviada fuente. Sólo tiene que utilizar la propiedad de fuente, y poner los valores en el orden correcto.

Sintaxis:

    element 
{
font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];
}

Ejemplo:

p {
font-weight: bold;
font-size: 20px;
font-family: Arial, sans-serif;
}

Sin embargo, con la fuente de taquigrafía que se puede condensar como sigue,

<!DOCTYPE html>
<head>
<style>
p {
font: bold 20px Arial, sans-serif;
}
</style>
</head>
<html>
<body>
<p>Hello! Welcome to include Help.</p>
</body>
</html>

salida

Changing font in CSS - 8


Deja un comentario

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