CSS: 100% dimensione carattere - 100% di cosa?

Esistono molti articoli e domande sui caratteri di dimensioni percentuali rispetto a quelli di altre dimensioni . Tuttavia, non riesco a scoprire quale dovrebbe essere il riferimento del valore percentuale. Capisco che questa è "la stessa dimensione in tutti i browser". Ho anche letto questo, per esempio:

Percentuale (%): l'unità percentuale è molto simile all'unità "em", salvo alcune differenze fondamentali. Innanzitutto, l'attuale dimensione del carattere è pari al 100% (ovvero 12pt = 100%). Durante l'utilizzo dell'unità percentuale, il testo rimane completamente scalabile per i dispositivi mobili e per l'accessibilità.

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

Ma se dici "cioè 12 pt = 100%", significa che devi prima definire font-size: 12pt. Funziona così? Definisci prima una dimensione in una misura assoluta e quindi fai riferimento a questo come "100%"? Non ha molto senso, come molti esempi dicono che è utile mettere:

body {
  font-size: 100%;
}

Così facendo, QUAL È la dimensione del carattere rispetto a? Ho notato che la dimensione che vedo sullo schermo differisce per ogni carattere. Arial sembra molto più grande di Times New Roman, per esempio. Inoltre, se lo facessi, dimensioni del corpo = 100%, ciò significherebbe che sarà lo stesso su tutti i browser? O solo se prima definisco un valore assoluto?

AGGIORNAMENTO, SAB LUG 23

Ci sto arrivando, ma per favore abbi pazienza.

Quindi, il valore% si riferisce alla dimensione del carattere del browser predefinita, se ho capito bene. Bene, è carino ma mi fa ancora molte altre domande:

1. Queste dimensioni standard sono sempre le stesse per ogni versione del browser o variano tra le versioni?
2. IO ! ho trovato (vedi immagine sotto) le impostazioni di Google Chrome (mai visto prima!) e vedo le impostazioni standard "serif", "sans-serif" e "monospace". Ma come posso interpretarlo per altri caratteri? Diciamo che definisco font: 100% Georgia;, che dimensione prenderà il browser? Cercherà la dimensione standard per serif o il carattere "Georgia" avrà una dimensione standard per il browser
3. Su diversi siti web ho letto cose come 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. Ma da quello che sto imparando ora credo che dovresti effettivamente scegliere tra un testo ridimensionabile (usando% o em, come quello che raccomandano in questa citazione), o avere "dimensioni dei caratteri accurate e coerenti tra i browser" (usando px o pt come base). È corretto?

Impostazioni di Google:

Questo è come penso che le cose potrebbero apparire se non si definisce la dimensione in valori assoluti.

L'impostazione predefinita del browser, che è qualcosa come 16pt per Firefox, è possibile controllare accedendo alle opzioni di Firefox, facendo clic sulla scheda Contenuto e controllando la dimensione del carattere. Puoi fare lo stesso anche per altri browser.

Personalmente mi piace controllare la dimensione del carattere predefinita dei miei siti Web, quindi in un file CSS incluso in ogni pagina imposterò l'impostazione predefinita BODY, in questo modo:

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

Ora la dimensione del carattere di tutti i miei tag HTML erediterà una dimensione del carattere di 14px.

Dì che voglio che tutti i div abbiano una dimensione del carattere del 10% più grande del corpo, semplicemente:

div {
    font-size: 110%
}

Ora qualsiasi browser che visualizza le mie pagine renderà automaticamente tutte le div del 10% più grandi di quelle del corpo, che dovrebbe essere qualcosa come 15,4px.

Se voglio che la dimensione del carattere di tutti i div sia più piccola del 10%, faccio:

div {
    font-size: 90%
}

Questo farà sì che tutti i div abbiano una dimensione del carattere di 12,6 px.

Inoltre, dovresti sapere che, poiché la dimensione del carattere è ereditata, ogni div annidato diminuirà della dimensione del carattere del 10%, quindi:

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

Il div interno avrà una dimensione del carattere di 11,34 px (90% di 12,6 px), che potrebbe non essere stato previsto.

Questo può aiutare nella spiegazione: http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-percentage

La mia comprensione è che quando il carattere è impostato come segue

body {
  font-size: 100%;
}

il browser renderà il carattere secondo le impostazioni dell'utente per quel browser.

La specifica dice che% è reso

rispetto alla dimensione del carattere dell'elemento genitore

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

In questo caso, prendo questo per significare ciò su cui è impostato il browser.

Una percentuale nel valore della font-sizeproprietà è relativa alla dimensione del carattere dell'elemento padre . CSS 2.1 lo dice in modo oscuro e confuso (riferendosi alla "dimensione del carattere ereditato"), ma CSS3 Text lo dice molto chiaramente.

Il genitore bodydell'elemento è l'elemento radice, ovvero l' htmlelemento. Se non impostato in un foglio di stile, la dimensione del carattere dell'elemento radice dipende dall'implementazione. Di solito dipende dalle impostazioni dell'utente.

L'impostazione font-size: 100%è inutile in molti casi, poiché un elemento eredita la dimensione del carattere del genitore (portando allo stesso risultato), se nessun foglio di stile imposta la propria dimensione del carattere. Tuttavia, può essere utile sovrascrivere le impostazioni in altri fogli di stile (inclusi i fogli di stile predefiniti del browser).

Ad esempio, un inputelemento ha in genere un'impostazione nel foglio di stile del browser, riducendo le dimensioni del carattere predefinito rispetto a quelle del testo della copia. Se si desidera rendere la dimensione del carattere uguale, è possibile impostare

input {dimensione carattere: 100%}

Per l' bodyelemento, l'impostazione logicamente ridondante font-size: 100%viene utilizzata abbastanza spesso, poiché si ritiene che aiuti contro alcuni bug del browser (nei browser che probabilmente hanno perso il loro significato ora).

È relativo alla dimensione del carattere del browser predefinita, a meno che non venga sovrascritto con un valore in pt o px.

Scusa se sono in ritardo alla festa, ma nella tua modifica fai un'osservazione a font: 100% Georgiacui le altre risposte non hanno risposto.

C'è una differenza tra font: 100% Georgiae font-size:100%; font-family:'Georgia'. Se fosse tutto il metodo abbreviato fatto, la parte della dimensione del carattere sarebbe priva di significato. Ma imposta anche molte proprietà sui loro valori predefiniti: l'altezza della linea diventa normal(o intorno a 1,2), idem per lo stile (non corsivo) e lo spessore (non grassetto).

È tutto. Le altre risposte hanno già menzionato tutto il resto da menzionare.

Come hai dimostrato in modo convincente, il font-size: 100%;rendering non sarà lo stesso in tutti i browser. Tuttavia, imposterai la faccia del carattere nel tuo file CSS, quindi sarà lo stesso (o un fallback) in tutti i browser.

Credo che font-size: 100%;possa essere molto utile quando lo si combina con un emdesign basato su. Come mostra questo articolo , questo creerà un sito Web molto flessibile.

Quando è utile? Quando il tuo sito deve adattarsi ai desideri dei visitatori. Prendiamo ad esempio un uomo anziano che mette la dimensione del carattere predefinita a 24 px. O qualcuno con un piccolo schermo con una grande risoluzione che aumenta la dimensione del carattere predefinita perché altrimenti deve socchiudere gli occhi. La maggior parte dei siti si romperebbe, ma i siti basati su em sono in grado di far fronte a queste situazioni.

Relativo alla dimensione predefinita definita per quel tipo di carattere.

Se qualcuno apre la tua pagina su un browser Web, c'è un carattere predefinito e la dimensione del carattere che utilizza.

Per quanto ne so, aiuta i tuoi contenuti ad adattarsi con diversi valori di famiglia di caratteri e dimensioni dei caratteri, in modo da renderli scalabili. Per quanto riguarda il problema di ereditare la dimensione del carattere, possiamo sempre ignorare fornendo una dimensione del carattere specifica per l'elemento.

Secondo TUTTE LE SPECIFICHE CHE RITORNO AL 1996 , i valori percentuali su si font-sizeriferiscono alla dimensione del carattere (calcolata) dell'elemento principale .

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

È così facile

E se divdichiarasse una dimensione del carattere relativa, come ems, o peggio ancora, un'altra percentuale ?? Vedi "calcolato" sopra. Qualunque sia l'unità assoluta in cui converte l'unità relativa.

L'unica domanda che rimane è cosa succede quando si utilizza un valore percentuale sull'elemento radice, che non ha parent:

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

In tal caso, vedere il "duplicato" di questa domanda. TLDR: le percentuali sull'elemento radice si riferiscono alla dimensione del carattere predefinita del browser, che potrebbe essere diversa per utente.

Riferimenti:

• CSS 1 spec (1996)
• Specifiche CSS 2.1 (2011)
• Caratteri CSS Livello 3 spec (2013)
• Redazione di CSS Font Level 3 redazione (2017)