2016-06-22 70 views
6

Sto avendo questa cosa strana che improvvisamente i caratteri della mia applicazione sono sempre 'in attesa', anche quando rimuovo i caratteri dalla posizione.font Chrome in attesa sempre

Il problema più grande di questo è che io uso browserSync, così quando cambio qualcosa che il pagina viene ricaricato, ma a causa delle richieste di caratteri che sono ancora attivi. Non lo caricherà prima che siano finiti. In modo da ottenere una pagina vuota

Su Firefox/IE, questo non è un problema.

Ho provato a riciclare il mio IIS, riavviare il mio PC, pool di applicazioni interruttore, ... tutto senza alcun risultato

Chrome: Versione 53.0.2767.5 dev-m (64-bit)

Font not loading

+0

BrowserSync utilizzando un build Gulp? – Randy

+0

@randy Sì, è tramite un ingorgo di build – Kiwi

+1

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

risposta

0

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.

Problemi correlati