font-size-adjust

il font-size-adjust nelle proprieta CSS, dice come  dovrebbe essere impostatala dimensione del font  scelto, in base all' altezza dei caratteri minuscoli piuttosto che le lettere maiuscole.

/* usa uno specifico font size */
font-size-adjust: none;

/* usa un dimensione font che dimezza le lettere
minuscole rispetto al font in uso*/
font-size-adjust: 0.5;

/* Valori globali */
font-size-adjust: inherit;
font-size-adjust: initial;
font-size-adjust: unset;

La proprieta è utilissima per la leggibilita dei fonts, specialmente alle piccole dimensioni, che è determinata piu dalla dimensione dei caratteri minuscoli che quelli maiuscoli. La leggibilita puo diventare un problema  quando la prima scelta font-family non è disponibile e la sua sostituzione porta una significativa differenza nell' aspetto in rapportato (tra la dimensione caratteri minuscoli e la dimensione del font).

Per usare questa proprieta in modo che sia comparibile con i browsers che non supportano il font-size-adjust, questa viene definita come un numero che  sarà moltiplicato per  la proprieta font-size. Questo significa che il valore specificato per la proprieta, deve essere normalmente il rapporto dell' aspetto del primo font scelto. Per esempio  un foglio di stile  che specifica :

font-size: 14px;  
font-size-adjust: 0.5;

...sta specificando che le lettere minuscole del font dovrebbero essere alte 7 pixel (0.5 × 14px).

Initial valuenone
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Mediavisual
Computed valueas specified
Animation typea number
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Sintassi

Valori

none
Sceglie  la dimensione del font in base solo alla proprieta font-size.
<numero>

Sceglie la dimensione del font in modo che il minuscolo ( come determinato dalla  x-height del font ) sia  un  numero  di volte il font-size.

Il numero specificato dovrebbe normalmente avere il rapporto di aspetto (rapporto di x-height con il font size) della prima scelta nel font-family. Questo vuol dire che il primo font scelto, quando disponibile, apparira della stessa dimensione nei browsers se supportano o no il font-size-adjust.

0 genera un testo di altezza zero (testo nascosto).

Sintassi Formale

none | <number>

Esempi

HTML

<p class="times">Questo testo usa il font Times(10px), che è difficile da leggere nelle piccole dimensioni.</p>
<p class="verdana">Questo testo usa il font Verdana(10px), che a delle lettere minuscole relativamente grandi.</p>
<p class="adjtimes">Questo è il Times 10px, ma adesso corretto allo stesso rapporto di aspetto del Verdana.</p>

CSS

.times {
  font-family: Times, serif;
  font-size: 10px;
}

.verdana {
  font-family: Verdana, sans-serif;
  font-size: 10px;
}

.adjtimes {
  font-family: Times, sans-serif; 
  font-size-adjust: 0.58;
  font-size: 10px;
}

Risultati

Specifiche

Specification Status Comment
CSS Fonts Module Level 3
The definition of 'font-size-adjust' in that specification.
Candidate Recommendation Initial definition

The CSS property font-size-adjust was initially defined in CSS 2, but dropped in CSS 2.1. It has been newly defined in CSS 3.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
font-size-adjustChrome Full support 54
Full support 54
Full support 43
Disabled
Disabled From version 43: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge No support No
Notes
No support No
Notes
Notes Although 'fontSizeAdjust' in element.style returns true, this feature isn't supported.
Firefox Full support 40
Full support 40
Full support 3
Notes
Notes Before Firefox 40, font-size-adjust: 0 was incorrectly interpreted as font-size-adjust: none (bug 1144885).
Full support 1
Notes
Notes Before Firefox 3, font-size-adjust was supported on Windows only.
IE No support NoOpera Full support 41
Full support 41
Full support 30
Disabled
Disabled From version 30: this feature is behind the Enable experimental Web Platform features preference.
Safari No support NoWebView Android Full support 54Chrome Android Full support 54
Full support 54
Full support 43
Disabled
Disabled From version 43: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Full support 4Opera Android Full support 41
Full support 41
Full support 30
Disabled
Disabled From version 30: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS No support NoSamsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.