Secondo il tutorial CSS per sviluppatori mozilla :
corsivo: imposta il testo per utilizzare la versione in corsivo del carattere, se disponibile ; se non disponibile, simulerà invece il corsivo con obliquo.
obliquo: imposta il testo per utilizzare una versione simulata di un carattere corsivo, creata inclinando la versione normale.
Da qui, deduciamo che se una versione in corsivo del carattere non è disponibile , sia in corsivo che obliquo comportano allo stesso modo. Poiché lo snippet di codice di W3Schools non specifica alcun particolare font-family, credo che venga utilizzato un carattere predefinito; un carattere predefinito che probabilmente non ha una versione in corsivo.
Ma come rendere disponibile una versione in corsivo del carattere?
Ciò significa che abbiamo almeno due versioni dello stesso carattere, una "normale" e una corsiva. Questi possono essere specificati nella <style>sezione con la @font-faceregola. Si prega di leggere brevemente: developer.mozilla , w3schools , tympanus.net . Come puoi vedere, il carattere viene caricato come file, che può avere le seguenti estensioni:eot, otf, woff, truetype .
Finora ho trovato due modi per collegare il file dei caratteri
URL assoluto del file del carattere: (snippet di codice da tympanus.net )
`@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'),
url (http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'),
url
(http://themes.googleusercontent.com/static/fonts/opensans/v8/
xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff)
format('woff');
}`
Si noti che in entrambi i casi abbiamo font-family: 'Open Sans', che sostanzialmente definisce lo stesso carattere; ma nel primo caso abbiamo font-style: normal;, mentre nel secondo caso abbiamo font-style: italic;. Si noti inoltre che gli URL puntano a file diversi. Ora, tornando allo snippet di codice di w3schools, è così che il browser può distinguere tra font-style: normalefont-style: italic
usando il percorso relativo al file del carattere: (frammento di codice da metaltoad.com )
Invece di definire valori di famiglia di caratteri separati per ciascun carattere, puoi utilizzare lo stesso nome di famiglia di caratteri per ciascun carattere e definire gli stili corrispondenti, in questo modo:
`@font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-R-webfont.eot');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-I-webfont.eot');
font-weight: normal;
font-style: italic;
}`
In questo caso, i .eotfile devono essere archiviati nella stessa cartella della pagina html. Ancora una volta, nota che font-familyè lo stesso, font-styleè diverso e anche gli URL sono diversi: Ubuntu- R -webfont vs Ubuntu- I -webfont.
Esempio di una versione in corsivo del carattere:
ctan.org : questo è un esempio di come vengono forniti file diversi per stili / pesi diversi dello stesso carattere. Né grassetto né corsivo vengono calcolati sul posto, vengono recuperati dal loro file specifico.
