2016-06-12 39 views
9

So che questa domanda è stata posta e ha risposto prima nei link sottostanti. Voglio cambiare il carattere predefinito senza dover aggiungere ad ogni css.cambiamento ionico carattere predefinito

Le cose che ho provato:

  1. Modifica della .tff, .eot, .woff, il file SVG direttamente per unire i miei caratteri e ionicons
  2. cercato di attuare il tipo di carattere specificando in html e file css (funziona, ma voglio che sia predefinito)
  3. Sovrascrivi i caratteri www/lib/ionic/con caratteri open-sans (gli ionicons scompaiono)
  4. Quando uso il primo collegamento (tutta la formattazione è scomparsa , solo sinistra con testo e pulsanti) Ho anche provato a posizionare il carattere-faccia in alto e in basso in scss/ionic.ap p.scss

Si prega di aiuto! Le risposte che ho visto sono istruzioni ma nessuna spiegazione su come funziona. Non so come funziona "ionic setup sass"/cosa fa. In che modo gulp partecipa a questo.

https://forum.ionicframework.com/t/how-to-change-the-font-of-all-texts-in-ionic/30459

https://forum.ionicframework.com/t/change-font-family-and-use-ionicons-icons/26729

risposta

7

importare tutti i font files per la vostra applicazione.

Esempio:

@font-face { 
    font-family: 'Lato-Light'; 
    src: url('../fonts/Lato-Light.eot') format('embedded-opentype'), url('../fonts/Lato-Light.woff') format('woff'), url('../fonts/Lato-Light.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 

Se si desidera che questo tipo di carattere nella intera applicazione, basta dare come questo

* { 
    font-family: 'Lato-Light' !important; 
} 

Se avete qualche doubt.Please fammi know.Thanks

+3

Un problema con questo approccio è che le mie icone fontawesome non funzionano a causa della direttiva! Important. –

+3

ciò che ha funzionato per me era lasciare fuori! Important e modificare le variabili $ font-family-sans-serif e $ font-family-light-sans-serif in _variables.scss in modo che il mio font sia il primo della lista. –

4

Per Ionic 2: Scarica i caratteri da fonts.google.com e incollali nella cartella delle risorse. Ora nel file SCSS effettuare le seguenti operazioni:

@font-face { 
font-family: MyFont; 
src: url("../assets/fonts/Lato-Regular.ttf"); 
} 

body, span, button, h1, h2, h3, h4, h5, h6, p, ion-item, ion-title { 
font-family: 'MyFont' !important; 
} 
15

La soluzione corretta per ionico 2 dovrebbe essere quello di cambiare la $font-family-basevariable e dei suoi amici. Questo è il modo in cui Ionic è fatto per farlo. Ti dà più controllo (come avere diversi tipi di carattere per piattaforma) ed evita la parola chiave !important, che è sempre una buona cosa.

Utilizzando Ionic 3.3, vai al tuo variables.scss e trova la sezione "Variabili condivise". Aggiungere queste righe:

$font-family-base: 'MyFont'; 
$font-family-ios-base: 'MyFont'; 
$font-family-md-base: 'MyFont'; 
$font-family-wp-base: 'MyFont'; 
+0

Questo è il modo _correct_ per farlo – jdixon04

+0

Questo dovrebbe essere contrassegnato come soluzione corretta. – user666

+0

Dove hai messo i file dei font? e come li hai importati? – Melchia

0

che non si desidera sostituire il tipo di carattere sull'icona a proposito, così si dovrebbe usare il CSS3 non (a) Proprietà

Per esempio, in app.scss:

@import url(https://fonts.googleapis.com/css?family=Varela+Round); 

    *:not(ion-icon) { 
    font-family: 'Varela Round', sans-serif!important; 
    }