Fundación - Tipografía base
Descripción
La tipografía en Foundation define encabezados, párrafos, listas y otros elementos en línea que crean estilos predeterminados atractivos y simples para los elementos.
La siguiente tabla enumera los diferentes tipos de tipografía utilizados en Foundation:
| No Señor. | Tipografía y descripción |
|---|---|
| 1 | Párrafos El párrafo es un grupo de oraciones definidas con diferentes tamaños de fuente, palabras resaltadas, altura de línea, etc. |
| 2 | Encabezamiento Define los encabezados HTML de h1 a h6. |
| 3 | Enlaces Crea un hipervínculo que abre otro documento cuando hace clic en el texto o una imagen. |
| 4 | Divisores Se usa para dar un descanso entre las secciones usando la etiqueta <hr>. |
| 5 | Listas ordenadas y desordenadas Foundation admite listas ordenadas, listas desordenadas para enumerar las cosas. |
| 6 | Listas de definiciones Las listas de definiciones se utilizan para mostrar pares de nombre y valor. |
| 7 | Blockquotes Representa un bloque de texto, que define mucho más grande de lo normal. |
| 8 | Abreviaturas y código La abreviatura define un término abreviado de una palabra o frase y el código representa un fragmento de código. |
| 9 | Pulsaciones de teclas Se utiliza para realizar una función específica. |
| 10 | Accesibilidad Foundation proporciona algunas pautas para acceder al contenido de la página. |
Referencia de Sass
Puede cambiar los estilos de los componentes utilizando las siguientes variables SASS que se enumeran en la tabla.
| No Señor. | Nombre y descripción | Tipo | Valor por defecto |
|---|---|---|---|
| 1 | $header-font-family Especifica la familia de fuentes para los elementos de encabezado. |
Cadena o lista | $ body-font-family |
| 2 | $header-font-weight Especifica el peso de la fuente de los encabezados. |
Cuerda | $ peso-global-normal |
| 3 | $header-font-style Proporciona estilo de fuente de encabezados. |
Cuerda | normal |
| 4 | $font-family-monospace Pila de fuentes utilizada para elementos que usan tipo monoespaciado, como ejemplos de código. |
Cadena o lista | Consolas, 'Liberation Mono', Courier, monoespacio |
| 5 | $header-sizes Define los tamaños de pantalla de los encabezados y cada tecla es un punto de interrupción, y cada valor es un mapa de los tamaños de los encabezados. |
Mapa | |
| 6 | $header-color Proporciona color a los encabezados. |
Color | heredar |
| 7 | $header-lineheight Define la altura de línea de los encabezados. |
Número | 1.4 |
| 8 | $header-margin-bottom Proporciona margen inferior de encabezados. |
Número | 0.5rem |
| 9 | $header-text-rendering Define el método para la representación de texto. |
Cuerda | optimizarLegibilidad |
| 10 | $small-font-size Especifica el tamaño de fuente para elementos <pequeños>. |
Número | 80% |
| 11 | $paragraph-margin-bottom Especifica el margen inferior de los párrafos. |
Número | 1rem |
| 12 | $paragraph-text-rendering Métodos para el párrafo de representación de texto. |
Cuerda | optimizarLegibilidad |
| 13 | $code-color Proporciona color de texto a las muestras de código. |
Color | $ negro |
| 14 | $code-font-family Proporciona una familia de fuentes a los ejemplos de código. |
Cadena o lista | $ font-family-monospace |
| 15 | $code-border Especifica el borde alrededor del código. |
Lista | 1 px sólido $ gris medio |
| dieciséis | $code-padding Especifica el relleno alrededor del texto. |
Número o lista | rem-calc (2 5 1) |
| 17 | $anchor-color Color predeterminado para enlaces. |
Color | $ color primario |
| 18 | $anchor-color-hover Especifica el color predeterminado para los enlaces al pasar el mouse. |
Color | color de escala ($ color de ancla, $ luminosidad: -14%) |
| 19 | $anchor-text-decoration Decoración de texto predeterminada para enlaces. |
Cuerda | ninguna |
| 20 | $anchor-text-decoration-hover Decoración de texto predeterminada para enlaces al pasar el mouse. |
Cuerda | ninguna |
| 21 | $hr-width Define el ancho máximo de un divisor. |
Número | $ ancho global |
| 22 | $hr-border Especifica el borde predeterminado de un divisor. |
Lista | 1 px sólido $ gris medio |
| 23 | $hr-margin Margen predeterminado para un divisor. |
Número o lista | rem-calc (20) automático |
| 24 | $list-lineheight Define la altura de la línea para los elementos de una lista. |
Número | $ párrafo-altura de línea |
| 25 | $list-style-type Proporciona el tipo de viñeta para listas desordenadas. |
Cuerda | Dto |
| 26 | $list-style-position Define el posicionamiento de viñetas en listas desordenadas. |
Cuerda | fuera de |
| 27 | $list-side-margin Define el margen del lado izquierdo (o derecho). |
Número | 1.25rem |
| 28 | $defnlist-term-weight Proporciona el peso de la fuente para los elementos <dt>. |
Cuerda | $ global-weight-bold |
| 29 | $defnlist-term-margin-bottom Proporciona espacio entre los elementos <dt> y <dd>. |
Número | 0.3rem |
| 30 | $blockquote-color Aplica el color del texto de los elementos <blockquote>. |
Color | $ gris oscuro |
| 31 | $blockquote-padding Proporciona relleno dentro de los elementos <blockquote>. |
Número o lista | rem-calc (9 20 0 19) |
| 32 | $blockquote-border Proporciona un borde lateral para los elementos <blockquote>. |
Lista | 1 px sólido $ gris medio |
| 33 | $cite-font-size Define el tamaño de fuente para los elementos <cite>. |
Número | rem-calc (13) |
| 34 | $cite-color Proporciona color de texto a los |
Color | $ gris oscuro |
| 35 | $keystroke-font Define la familia de fuentes para los elementos <kbd>. |
Cadena o lista | $ font-family-monospace |
| 36 | $keystroke-color Define el color del texto para los elementos <kbd>. |
Color | $ negro |
| 37 | $keystroke-background Proporciona color de fondo para los elementos <kbd>. |
Color | $ gris claro |
| 38 | $keystroke-padding Especifica el relleno para los elementos <kbd>. |
Número o lista | rem-calc (2 4 0) |
| 39 | $keystroke-radius Muestra el radio del borde de los elementos <kbd>. |
Número o lista | $ radio-global |
| 40 | $abbr-underline Proporciona el estilo de borde inferior para los elementos <abbr>. |
Lista | 1px punteado $ negro |