Font api

$font-size-base * 1.75;$h4-font-size: $font-size-base * 1.5;$h5-font-size: $font-size-base * 1.25;$h6-font-size: $font-size-base; Mapas Las utilidades de tamaño de fuente se generan a partir de este mapa, en combinación con nuestra API de utilidades. $font-sizes: ( 1: $h1-font-size, 2: $h2-font-size, 3: $h3-font-size, 4: $h4-font-size, 5: $h5-font-size, 6: $h6-font-size); API de utilidades Las utilidades de fuentes y texto se declaran en nuestra API de utilidades en scss/_utilities.scss. Aprende a usar la API de utilidades. "font-family": ( property: font-family, class: font, values: (monospace: var(--#{$variable-prefix}font-monospace)) ), "font-size": ( rfs: true, property: font-size, class: fs, values: $font-sizes ), "font-style": ( property: font-style, class: fst, values: italic normal ), "font-weight": ( property: font-weight, class: fw, values: ( light: $font-weight-light, lighter: $font-weight-lighter, normal: $font-weight-normal, bold: $font-weight-bold, bolder: $font-weight-bolder ) ), "line-height": ( property: line-height, class: lh, values: ( 1: 1, sm: $line-height-sm, base: $line-height-base, lg: $line-height-lg, ) ), "text-align": ( responsive: true, property: text-align, class: text, values: ( start: left, end: right, center: center, ) ), "text-decoration": ( property: text-decoration, values: none underline line-through ), "text-transform": ( property: text-transform, class: text, values: lowercase uppercase capitalize ), "white-space": ( property: white-space, class: text, values: ( wrap: normal, nowrap: nowrap, ) ), "word-wrap": ( property: word-wrap word-break, class: text, values: (break: break-word), rtl: false ),

Este guia explica como usar a API Google Fonts para adicionar fontes à sua Webpáginas de destino. Você não precisa programar nada. basta adicionar umna folha de estilo do seu documento HTML e consulte a fonte em um estilo CSS.Um exemplo rápidoVeja um exemplo. Copie e cole o seguinte HTML em um arquivo: body { font-family: 'Tangerine', serif; font-size: 48px; } Making the Web Beautiful! Em seguida, abra o arquivo em um navegador da Web moderno. Você verá uma página exibindo oabaixo, na fonte chamada Tangerine:Como deixar a Web bonitaEssa frase é um texto comum, portanto, você pode alterar a aparência usando CSS. Testaradicionando uma sombra ao estilo no exemplo anterior:body { font-family: 'Tangerine', serif; font-size: 48px; text-shadow: 4px 4px 4px #aaa;}Agora você verá uma sombra projetada abaixo do texto:Como deixar a Web bonitaE esse é só o começo do que você pode fazer com a API Fonts e CSS.Visão geralVocê pode começar a usar a API Google Fonts em apenas duas etapas:Adicione um link da folha de estilo para solicitar as fontes da Web desejadas:link rel="stylesheet" href=" o estilo de um elemento com a fonte da Web solicitada, seja em uma folha de estilo:.css-selector {font-family: 'Font Name', serif;}ou com um estilo in-line no próprio elemento:Font Name', serif;">Your text.Para ver uma lista das fontes que você pode usar, consulte Google Fonts.Especificar famílias e estilos de fontes em um URL da folha de estiloPara determinar qual URL usar no link da folha de estilo, comece com a tagURL base da API

Mismo o, a veces, al elemento principal. Estas clases se pueden personalizar según sea necesario con nuestra API de utilidad.p>p class="lh-base">Este es un párrafo largo escrito para mostrar cómo nuestras utilidades afectan la altura de línea de un elemento. Las clases se aplican al elemento mismo o, a veces, al elemento principal. Estas clases se pueden personalizar según sea necesario con nuestra API de utilidad.p>p class="lh-lg">Este es un párrafo largo escrito para mostrar cómo nuestras utilidades afectan la altura de línea de un elemento. Las clases se aplican al elemento mismo o, a veces, al elemento principal. Estas clases se pueden personalizar según sea necesario con nuestra API de utilidad.p> Monospace Cambie una selección a nuestra pila de fuentes monoespaciadas con .font-monospace. Esto está en monospace p class="font-monospace">Esto está en monospacep> Restablecer color Restablece el color de un texto o enlace con .text-reset, para que herede el color de su padre. p class="text-muted"> Texto silenciado con un a href="#" class="text-reset">vínculo de reinicioa>.p> Decoración de texto Decora texto en componentes con clases de decoración de texto. p class="text-decoration-underline">Este texto tiene una línea debajo.p>p class="text-decoration-line-through">Este texto tiene una línea que lo atraviesa.p>a href="#" class="text-decoration-none">Se ha quitado la decoración de texto de este enlacea> Sass Variables // stylelint-disable value-keyword-case$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;// stylelint-enable value-keyword-case$font-family-base: var(--#{$variable-prefix}font-sans-serif);$font-family-code: var(--#{$variable-prefix}font-monospace);// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins// $font-size-base affects the font size of the body text$font-size-root: null;$font-size-base: 1rem; // Assumes the browser default, typically `16px`$font-size-sm: $font-size-base * .875;$font-size-lg: $font-size-base * 1.25;$font-weight-lighter: lighter;$font-weight-light: 300;$font-weight-normal: 400;$font-weight-bold: 700;$font-weight-bolder: bolder;$font-weight-base: $font-weight-normal;$line-height-base: 1.5;$line-height-sm: 1.25;$line-height-lg: 2;$h1-font-size: $font-size-base * 2.5;$h2-font-size: $font-size-base * 2;$h3-font-size: