io non so che cosa è sbagliato nel tuo caso, ma, vi mostrerò come fare a caricare i font, spero che questo aiuta.
Primo: il font che si desidera utilizzare, se non ne possiedi uno, i font google sono un posto fantastico per cercare e scaricare alcuni tipi di carattere.
Secondo: andare a here is the website (fontsquirrel) e andare a generatore, segnare l'esperto possibilità di fare alcune modifiche nel vostro download, segnare i due opzioni: EOT Lite e SVG nella sezione: formati di font :, andare giù e contrassegnare l'opzione Accordo:, quindi scaricare il carattere.
Terzo: dopo attendere qualche secondo, e quando il vostro carattere è pronto ad andare, estrarre in un unico file il contenuto, verrà in questo modo:
- Specimen_files
- stylesheet.css
- Generator-config
- Font-you-download.eot
- Font-you-download.woff
- Font-you-download.woff2
- Una dimostrazione del font scaricato in HTML
- Font-scaricabile dall'utente.svg
- Il font-you-download (quello di installare nel dispositivo)
Ora, eliminare questi file, se si vuole,
- generatore-config
- specimen_files
- una dimostrazione del font scaricato in HTML
Cinque: copia ed incolla il file che contiene tutti i file che hai scaricato in font-scoiattolo nel progetto,
Negli stylesheet.css apparirà più o meno così:
@font-face {
font-family: 'open_sanslight_italic';
src: url('opensans-lightitalic-webfont.eot');
src: url('opensans-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-lightitalic-webfont.woff2') format('woff2'),
url('opensans-lightitalic-webfont.woff') format('woff'),
url('opensans-lightitalic-webfont.svg#open_sanslight_italic') format('svg');
font-weight: normal;
font-style: normal;
}
Six: Ecco la mappa dei file di mio archivio di esempio per una maggiore comprensione:
- Project-2017
Fonts -----
---------- Il file che contiene tutti i file (Quello da cui hai preso alcuni file)
----- Imgs
---------- Tutte le immagini del file sito web
----- Js
---------- js.js
Stili -----
---------- Styles.css
- ---- Index.html
Sette: Metti la tua posizione dei file di font, come questo codice qui sotto seguendo la mappa qui sopra:
@font-face {
font-family: 'open_sanslight_italic';
src: url('../fonts/opensans-light/opensans-lightitalic-webfont.eot');
src: url('../fonts/opensans-light/opensans-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/opensans-light/opensans-lightitalic-webfont.woff2') format('woff2'),
url('../fonts/opensans-light/opensans-lightitalic-webfont.woff') format('woff'),
url('../fonts/opensans-light/opensans-lightitalic-webfont.svg#open_sanslight_italic') format('svg');
font-weight: normal;
font-style: normal;
}
Ora la spiegazione degli URL:
({ "../"} per andare a questo estruture :),
---- - Caratteri
---------- Il file che contiene tutti i file (quello da cui sono stati prelevati alcuni file)
----- Imgs
---------- Al l immagini del sito
----- Js
---------- js.js
----- Stili
---------- stili. css
----- Indice.html
({ "Font"} per andare dove i tuoi file dei font),
({ "opensans-Light"} è il file che ho scaricato per l'esempio, al suo interno hanno tutti i file che hai scaricato in font-scoiattolo);
In questo momento hai installato il font, ma poi mi hai chiesto: Come l'ho messo in HTML?, si hanno 2 opzioni per utilizzare il carattere, uno è la copia del fila font-familly come questo nel mio esempio:
font-family: 'open_sanslight_italic';
e l'impostazione della classe come:
.opn-itc{
font-family: 'open_sanslight_italic';
}
**Or**
body{
font-family: 'open_sanslight_italic';
}
Dopo tutto questo tutorial hai successo nel scegliere il tuo font, modificare il font, inserire il tuo css e chiamarlo come una classe da inserire ovunque.
Scusate se questo tutorial è diventato un po 'lungo o complesso, all'inizio pensavo anche che il cane succhiava manga, ma ripetevo questo processo più volte e iniziate a fare a meno, in modalità automatica, se avete bisogno di aiuto chiamami.
BrowserSync utilizzando un build Gulp? – Randy
@randy Sì, è tramite un ingorgo di build – Kiwi
Trovato qualcuno che ha qualche problema con adblocker, potresti [provare] (http://stackoverflow.com/questions/5585918/what-does-pending-mean-for-request-in- chrome-developer-window) se questo funziona. – Randy