Pular para o conteúdo
murad.guide

As Três Camadas

Capítulo 10

Fontes, mapas e vídeo

5 min de leitura 953 palavras 1 gravura

A oficina ganha uma voz tipográfica e um recorte do Alto da Sé. Você liga poucas fontes da web, embute um mapa e um trecho de vídeo e mantém o texto próprio no centro da página. O exemplo está em exemplos/10-fontes-midia/.

Fonte da web é um arquivo de letra que o navegador baixa. Sem ela, a página ainda deve ler bem com a família reserva.

Trabalhe na cópia inicio desta etapa. Leia e digite o código indicado; mude apenas uma coisa. Antes de recarregar, escreva o resultado que espera. Depois compare com a referência completa ao lado. Se algo falhar, confira primeiro o arquivo salvo e o caminho aberto.

O que você vai aprender

Fonte da web em dois passos

Até aqui a oficina usou fontes do computador. Arial, Georgia e a família genérica sans-serif já bastavam.

Uma fonte da web chega em dois pedaços. Primeiro o link no head. Depois a regra CSS com o nome certo.

<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Nunito+Sans:wght@400;600&display=swap" rel="stylesheet">

O provedor entrega esse código. Duas famílias chegam: uma para título, outra para texto. Mais do que isso atrasa o celular.

body {
  font-family: "Nunito Sans", Arial, sans-serif;
}

h1, h2 {
  font-family: "Libre Baskerville", Georgia, serif;
}

A lista é uma fila. O navegador tenta o primeiro nome. Se o arquivo não chegou, usa Arial ou Georgia. Se nada disso existir, usa a família genérica sans-serif ou serif.

serif tem pézinho nas letras. sans-serif não tem. Essa palavra reserva é o fallback: o plano B da tipografia.

Pare e experimente. Comente o link das fontes, salve e recarregue. Preveja títulos em Georgia. Recoloque o link e confira a volta da Baskerville.

Erro comum: copiar só o font-family e esquecer o link. Sem o arquivo, a oficina nunca vê a letra nova.

Cada família extra é um pedido a mais na rede. No site da oficina, duas bastam: uma de título e uma de parágrafo.

O nome no CSS precisa ser o mesmo do catálogo. Libre Baskerville não é Libre-Baskerville. Aspas protegem o espaço no meio do nome.

Não misture dez pesos. 400 e 700 no título, 400 e 600 no texto, já cobrem corpo e ênfase.

Se a máquina estiver sem internet, o fallback entra. O HTML continua seu. Só a letra muda.

Pare e experimente. Troque só o título para "Courier New", monospace. Preveja uma letra de máquina. Recarregue, confira e restaure a Baskerville.

Erro comum: colar três ou quatro link de fontes “para testar” e deixar todos ativos. A página fica pesada e você não sabe qual letra está valendo.

iframe com título

iframe embute outra página dentro da sua. É um quadro. Quem usa leitor de tela precisa de um title que diga o que há lá dentro.

No exemplo, o mapa e o vídeo são páginas locais. Assim o exercício abre no disco e em 127.0.0.1 sem depender de um serviço pago.

<iframe
  src="mapa.html"
  title="Mapa ilustrativo do Alto da Sé, em Olinda"
  width="560"
  height="320">
</iframe>

<iframe
  src="trecho.html"
  title="Trecho fictício da oficina de xilogravura"
  width="560"
  height="320">
</iframe>

mapa.html descreve o Alto da Sé com texto e um desenho simples. trecho.html apresenta um clipe inventado da xilogravura. Os dois arquivos estão na pasta do exemplo.

Se um dia você colar o código de um mapa público, mantenha o title e um parágrafo seu ao lado. A cidade de Olinda é real; o endereço da oficina é fictício. Não publique a casa de ninguém.

Pare e experimente. Apague o title do mapa, salve e inspecione o quadro. Preveja um iframe sem nome. Recoloque o title antes de avançar.

Erro comum: deixar title vazio ou repetir só a palavra iframe. Isso não descreve o conteúdo.

O embed não substitui a oficina

Um quadro de mapa não conta o horário da cerâmica. Um vídeo de terceiros não explica a inscrição.

A página continua precisando de h1, parágrafos, lista de oficinas e o link para o contato do capítulo 9. O iframe é apoio, não o texto.

Serviços de mapa e de vídeo trazem cookies e teclado próprio. Prefira o arquivo local enquanto estuda. Se colar um código externo, leia o que ele pede: largura, altura, permissões.

Não use embed antigo no lugar de iframe neste volume. O iframe com title é o caminho que vamos conferir.

Página da Oficina do Farol com fonte da web e mapa ilustrativo

O diagrama mostra título, texto e o quadro do mapa. Compare com exemplos/10-fontes-midia/index.html.

O HTML da oficina nesta etapa continua com header, main e footer. Fontes e iframes entram sem apagar as regiões que você já marcou nos capítulos 2 e 8.

Se o Google Fonts estiver fora do ar, a página não quebra. O fallback assume. Esse é o teste de que o conteúdo é seu e o quadro é extra.

Atividades

  1. O que acontece se o link das fontes falhar e o CSS tiver fallback?
  2. Por que o volume pede poucas famílias?
  3. Qual atributo o iframe precisa para ter nome no leitor de tela?
  4. Por que o mapa local não dispensa o parágrafo sobre a oficina?

Respostas comentadas

  1. O navegador usa Arial ou Georgia e, no fim, a família genérica. A página não some.
  2. Cada família é um download. Duas já separam título e texto sem atrasar o celular.
  3. title com uma frase que descreva o quadro, não a tag.
  4. O iframe mostra um recorte. Horário, inscrição e aviso de conteúdo fictício continuam no HTML da oficina.

Referências

O arquivo completo

Referência do exemplo 10-fontes-midia, reproduzida aqui para que você possa conferir sem sair da página.

mapa.html

<!DOCTYPE html>

<html lang="pt-BR">
<head>
<meta charset="utf-8"/>
<title>Mapa fictício</title>
<style>
      body { margin: 0; font-family: sans-serif; background: #2a6f7f; color: #fff; display: grid; place-items: center; min-height: 100vh; }
    </style>
<style>body{overflow-wrap:anywhere}img,input,textarea,select,iframe{max-width:100%}img{height:auto}fieldset,.cartao{min-width:0}pre{max-width:100%;overflow:auto}:focus-visible{outline:3px solid #005fcc;outline-offset:3px}.atalho-conteudo{position:absolute;left:.5rem;top:-6rem;background:white;color:#172f50;padding:.5rem;z-index:999}.atalho-conteudo:focus{top:.5rem}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}</style></head>
<body><a class="atalho-conteudo" href="#conteudo">Pular para o conteúdo</a><main id="conteudo" tabindex="-1">
<p>Olinda (mapa ilustrativo deste curso)</p>
</main></body>
</html>

simulacao.js

const f=document.querySelector("#simulacao");f.querySelector("button[type=submit]").disabled=false;f.addEventListener("submit",e=>{e.preventDefault();document.querySelector("#retorno").textContent="Pedido fictício conferido. Nada foi enviado ou guardado.";});