CSS: 100% do tamanho da fonte - 100% do que?

Existem muitos artigos e perguntas sobre fontes de tamanho percentual ou outro tamanho . No entanto, não consigo descobrir o que a referência do valor percentual deveria ser. Entendo que este é 'o mesmo tamanho em todos os navegadores'. Eu também li isso, por exemplo:

Porcentagem (%): a unidade de porcentagem é muito parecida com a unidade "em", exceto por algumas diferenças fundamentais. Em primeiro lugar, o tamanho da fonte atual é igual a 100% (ou seja, 12pt = 100%). Ao usar a unidade de porcentagem, seu texto permanece totalmente escalável para dispositivos móveis e para acessibilidade.

Fonte: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Mas se você disser "ou seja, 12 pt = 100%", significa que você precisa primeiro definir font-size: 12pt. É assim que funciona? Você primeiro define um tamanho em uma medida absoluta e depois se refere a ele como '100%'? Não faz muito sentido, pois muitas amostras dizem que é útil colocar:

body {
  font-size: 100%;
}

Portanto, ao fazer isso, O QUE é o tamanho da fonte em relação ao? Percebo que o tamanho que vejo na tela é diferente para cada fonte. Arial parece muito maior que o Times New Roman, por exemplo. Além disso, se eu fizer isso, tamanho do corpo = 100%, isso significa que será o mesmo em todos os navegadores? Ou apenas se eu primeiro definir um valor absoluto?

ATUALIZAÇÃO, SÁBADO 23 DE JULHO

Estou chegando lá, mas por favor, tenha paciência comigo.

Portanto, o valor% está relacionado ao tamanho da fonte do navegador padrão, se bem entendi. Bem, isso é bom, mas me dá novamente várias outras perguntas:

1. Esse tamanho padrão é sempre o mesmo para todas as versões do navegador ou elas variam entre as versões?
2. EU ! Encontrei (veja a imagem abaixo) as configurações do Google Chrome (nunca vi isso antes!) e vejo as configurações padrão "serif", "sans-serif" e "monospace". Mas como interpreto isso para outras fontes? Digamos que eu defina font: 100% Georgia;, que tamanho o navegador terá? Ele procurará o tamanho padrão para serif ou tem a fonte "Georgia" um tamanho padrão para o navegador
3. Em vários sites, eu leio coisas como Sizing text and line-height in ems, with a percentage specified on the body [..], was shown to provide **accurate, resizable text across all browsers** in common use today. Mas, pelo que estou aprendendo agora, acredito que você deve realmente escolher entre texto redimensionável (usando% ou em, como o recomendado nesta citação) ou ter 'tamanhos de fonte precisos e consistentes nos navegadores' (usando px ou pt como base). Isso está correto?

Configurações do Google:

É assim que acho que as coisas poderiam parecer se você não definir o tamanho em valores absolutos.

O padrão do navegador, que é algo como 16pt para o Firefox, você pode verificar acessando as opções do Firefox, clicando na guia Conteúdo e verificando o tamanho da fonte. Você também pode fazer o mesmo com outros navegadores.

Pessoalmente, gosto de controlar o tamanho da fonte padrão dos meus sites; portanto, em um arquivo CSS incluído em todas as páginas, definirei o padrão BODY da seguinte forma:

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px
}

Agora, o tamanho da fonte de todas as minhas tags HTML herdará um tamanho de fonte de 14px.

Digamos que eu queira que todas as divs tenham um tamanho de fonte 10% maior que o corpo, simplesmente:

div {
    font-size: 110%
}

Agora, qualquer navegador que visualize minhas páginas fará com que todos os divs sejam 10% maiores que o do corpo, o que deve ser algo como 15,4px.

Se eu quiser que o tamanho da fonte de todas as div seja 10% menor, faça:

div {
    font-size: 90%
}

Isso fará com que todas as divs tenham um tamanho de fonte de 12,6 px.

Além disso, você deve saber que, como o tamanho da fonte é herdado, cada div aninhada diminui em 10% o tamanho da fonte, portanto:

<div>Outer DIV.
    <div>Inner DIV</div>
</div>

A div interna terá um tamanho de fonte de 11,34 px (90% de 12,6 px), o que pode não ter sido planejado.

Isso pode ajudar na explicação: http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-percentage

Meu entendimento é que, quando a fonte é definida da seguinte forma

body {
  font-size: 100%;
}

o navegador renderizará a fonte de acordo com as configurações do usuário para esse navegador.

A especificação diz que% é processado

em relação ao tamanho da fonte do elemento pai

http://www.w3.org/TR/CSS1/#font-size

Nesse caso, entendo isso como o navegador está definido.

Uma porcentagem no valor da font-sizepropriedade é relativa ao tamanho da fonte do elemento pai . O CSS 2.1 diz isso de forma obscura e confusa (referindo-se ao "tamanho da fonte herdada"), mas o Texto CSS3 diz isso de forma muito clara.

O pai do bodyelemento é o elemento raiz, ou seja, o htmlelemento A menos que definido em uma folha de estilos, o tamanho da fonte do elemento raiz é dependente da implementação. Geralmente depende das configurações do usuário.

A configuração font-size: 100%é inútil em muitos casos, pois um elemento herda o tamanho da fonte do pai (levando ao mesmo resultado), se nenhuma folha de estilo definir seu próprio tamanho da fonte. No entanto, pode ser útil substituir configurações em outras folhas de estilo (incluindo folhas de estilo padrão do navegador).

Por exemplo, um inputelemento normalmente possui uma configuração na folha de estilos do navegador, tornando seu tamanho de fonte padrão menor que o do texto da cópia. Se você deseja que o tamanho da fonte seja o mesmo, você pode definir

entrada {tamanho da fonte: 100%}

Para o bodyelemento, a configuração logicamente redundante font-size: 100%é usada com bastante frequência, pois acredita-se que ela ajude contra alguns bugs do navegador (em navegadores que provavelmente perderam seu significado agora).

É relativo ao tamanho da fonte do navegador padrão, a menos que você o substitua por um valor em pt ou px.

Desculpe se estou atrasado para a festa, mas em sua edição você faz um comentário sobre o font: 100% Georgiaqual as outras respostas não responderam.

Há uma diferença entre font: 100% Georgiae font-size:100%; font-family:'Georgia'. Se esse fosse o método abreviado, a parte do tamanho da fonte não teria sentido. Mas também define muitas propriedades para seus valores padrão: a altura da linha se torna normal(ou em torno de 1,2), idem para o estilo (sem itálico) e o peso (sem negrito).

Isso é tudo. As outras respostas já mencionavam tudo o mais que havia para mencionar.

Como você mostrou de forma convincente, o font-size: 100%;não renderizará o mesmo em todos os navegadores. No entanto, você definirá a face da fonte no seu arquivo CSS, portanto será a mesma (ou alternativa) em todos os navegadores.

Acredito que font-size: 100%;pode ser muito útil ao combiná-lo com o emdesign baseado em. Como mostra este artigo , isso criará um site muito flexível.

Quando isso é útil? Quando o seu site precisa se adaptar aos desejos dos visitantes. Tomemos, por exemplo, um homem idoso que coloca o tamanho da fonte padrão em 24 px. Ou alguém com uma tela pequena com uma resolução grande que aumenta o tamanho da fonte padrão porque, de outra forma, ele precisa apertar os olhos. A maioria dos sites falha, mas sites baseados em em são capazes de lidar com essas situações.

Relativo ao tamanho padrão definido para essa fonte.

Se alguém abrir sua página em um navegador da Web, há uma fonte e tamanho de fonte padrão usados.

Quanto ao meu entendimento, ele ajuda seu conteúdo a se ajustar a diferentes valores da família e do tamanho das fontes, tornando o conteúdo escalável. Quanto à questão de herdar o tamanho da fonte, sempre podemos substituir, fornecendo um tamanho de fonte específico para o elemento.

De acordo com TODAS AS ESPECIFICAÇÕES datadas de 1996 , os valores percentuais font-sizereferem-se ao tamanho da fonte (calculada) do elemento pai .

<style>
div {
  font-size: 16px;
}
span {
  font-size: 75%;
}
</style>
<div><span>this font size is 12px!</span></div>

É tão fácil.

E se o divdeclarar um tamanho de fonte relativo, como ems, ou pior ainda, outra porcentagem? Veja "computado" acima. Qualquer unidade absoluta em que a unidade relativa se converta.

A única questão que resta é o que acontece quando você usa um valor percentual no elemento raiz, que não possui pai:

html {
  font-size: 62.5%; /* 62.5% of what? */
}

Nesse caso, consulte o "duplicado" desta pergunta. TLDR: porcentagens no elemento raiz referem-se ao tamanho da fonte padrão do navegador, que pode ser diferente por usuário.

Referências:

• Especificação CSS 1 (1996)
• Especificação CSS 2.1 (2011)
• Especificação de fontes CSS nível 3 (2013)
• Rascunho do editor Nível 3 de Fontes CSS (2017)