En este artículo, aprenderemos cómo agregar variables tipográficas al sitio web utilizando Primer CSS .
Primer CSS es un marco CSS gratuito de código abierto que se crea con el sistema de diseño de GitHub para brindar soporte a la amplia gama de sitios web de Github. Crea la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Los principios de CSS orientados a objetos, el CSS funcional y la arquitectura BEM influyen en su enfoque de CSS. Es un modelo altamente reutilizable.
Variables tipográficas: estas variables se utilizan para cambiar la altura, el peso de la fuente y el tamaño de cualquier fuente. En palabras simples, se usa para diseñar la fuente.
Sintaxis:
$variable-name: value of the variable;
Las variables utilizadas para cambiar el tamaño de fuente se enumeran a continuación:
Tamaños de encabezado – móvil:
- $h00-size-mobile: esta variable se usa para establecer el tamaño de fuente en 40px.
- $h0-size-mobile: esta variable se usa para establecer el tamaño de fuente en 32px.
- $h1-size-mobile: esta variable se usa para establecer el tamaño de fuente en 26px.
- $h2-size-mobile: esta variable se usa para establecer el tamaño de fuente en 22px.
- $h3-size-mobile: esta variable se usa para establecer el tamaño de fuente en 18px.
Tamaños de encabezado – escritorio:
- $h00-size: esta variable se usa para establecer el tamaño de fuente en 48px.
- $h0-size: esta variable se usa para establecer el tamaño de fuente en 40px.
- $h1-size: esta variable se usa para establecer el tamaño de fuente en 32 px.
- $h2-size: esta variable se usa para establecer el tamaño de fuente en 24px.
- $h3-size: esta variable se usa para establecer el tamaño de fuente en 20px.
- $h4-size: esta variable se usa para establecer el tamaño de fuente en 16px.
- $h5-size: esta variable se usa para establecer el tamaño de fuente en 14px.
- $h6-size: esta variable se usa para establecer el tamaño de fuente en 12px.
Las variables utilizadas para cambiar el peso de la fuente se enumeran a continuación:
- $font-weight-bold: esta variable se utiliza para establecer el peso de la fuente en 600.
- $font-weight-light: esta variable se usa para establecer el peso de la fuente en 300.
Las variables utilizadas para cambiar la altura de la fuente se enumeran a continuación:
- $lh-condensed-ultra: esta variable se usa para establecer el peso de la fuente en 1.
- $lh-condensed: esta variable se usa para establecer el peso de la fuente en 1,25.
- $lh-default: esta variable se utiliza para establecer el peso de la fuente en 1,5.
Acercarse:
- En primer lugar, cree un archivo HTML e incluya Primer CSS.
- En el siguiente paso, mapee su CSS con el archivo SCSS usando un compilador.
- En el último paso, simplemente ejecute el archivo HTML y obtendrá su resultado.
Ejemplo 1: en el siguiente código, usaremos una variable de tamaño de fuente para cambiar el tamaño de la variable.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hello Bulma!</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> <link rel="stylesheet" href="k/gfg.css"> </head> <body> <center> <h1 style="color:green; ">GeeksforGeeks</h1><br> <h2>A computer science portal for geeks.</h2> </center> </body> </html>
Código SCSS: antes de crear el archivo SCSS, recuerde que el nombre del archivo SCSS debe ser el mismo que el archivo CSS. En este ejemplo, hemos utilizado los archivos gfg.css y gfg.scss .
- gfg.scss
CSS
$h00-size-mobile: 40px;
body {
font-size: $h00-size-mobile;
}
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hello Bulma!</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> <link rel="stylesheet" href="k/gfg.css"> </head> <body> <center> <h1 style="font-size:50px;color:green; "> GeeksforGeeks</h1><br> <h2 class="gfg1"> A computer science portal for geeks.</h2> <h1 class="gfg1">GeeksforGeeks</h1> <h1 class="gfg2">GeeksforGeeks</h1> <h1 class="gfg3">GeeksforGeeks</h1> <h1 class="gfg4">GeeksforGeeks</h1> <h1 class="gfg5">GeeksforGeeks</h1> </center> </body> </html>
SCSS code
$h00-size-mobile: 40px;
$h0-size-mobile: 32px;
$h1-size-mobile: 26px;
$h2-size-mobile: 22px;
$h3-size-mobile: 18px;
.gfg1 {
font-size: $h00-size-mobile;
}
.gfg2 {
font-size: $h0-size-mobile;
}
.gfg3 {
font-size: $h1-size-mobile;
}
.gfg4 {
font-size: $h2-size-mobile;
}
.gfg5 {
font-size: $h3-size-mobile;
}
Producción:
Referencia: https://primer.style/css/support/typography#typography-variables
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA