Carattere personalizzato con Ionic2

Question

Nel mio progetto Ionic2, ho inserito i miei caratteri (formato ttf) nella cartella www/build/fonts. Ma quando costruisco l'app, i caratteri scompaiono.

Come posso fare?

Answer 1

Ionic 2 utilizza un modulo npm denominato ionic-gulp-fonts-copy. Questo task gulp caricherà i font presenti nella directory node_modules/ionic-angular/fonts. Perché non provi a posizionare il tuo font in quella directory e riprovare?

(L'inserimento dei caratteri nella cartella di creazione non sarà più utile poiché la cartella di creazione viene rimossa e creata ogni volta che si esegue una build dell'applicazione).

Spero che questo ti aiuti. Grazie.

Answer 2

I caratteri nella generazione scompaiono ogni volta man mano che la generazione di gulp pulisce la cartella di generazione ogni volta. Per evitare ciò è necessario includere le attività di gulp nel file gulpfile.ts.

Modificare le seguenti modifiche al file gulpfile.ts.

• Includere compito fiato per aggiungere l'icona css e font al vostro costruire

  gulp.task('myCss', function(){ 
      return gulp.src('path-to-your-font-lib/style.css') 
       .pipe(gulp.dest('www/build/css')) 
      }); 
  gulp.task('myFonts', function(){ 
      return gulp.src('path-to-your-font-lib/fonts/**/*.+(eot|svg|ttf|woff)') 
       .pipe(gulp.dest('www/build/fonts')) 
      }); 
  

• Modifica la costruzione sorso e guardare compito come segue (Aggiungere il vostro carattere e css di guardia e build)

  gulp.task('watch', ['clean'], function(done){ 
      //existing ionic2 code 
  } 
  gulp.task('build', ['clean','myCss','myFonts'], function(done){ 
      //existing ionic2 code 
  } 
  

Answer 3

Non posizionare il font in node_modules o costruire cartella. node_modules cartella ottiene aggiornamento su NPM installare o aggiornare NPM e costruire la cartella viene creato con ogni comando build.

miglior modo possibile, che attualmente sto usando con un'applicazione di produzione è quello di mettere i font all'interno www/fonts cartella e farvi riferimento all'interno del vostro /app/themes/app.core.scss come qui di seguito.

@font-face { 
    font-family: 'gurbaniakharregular'; 
    src: url('../../fonts/gurbaniakhar.ttf.eot'); 
    src: url('../../fonts/gurbaniakhar.ttf.eot?#iefix') format('embedded-opentype'), 
     url('../../fonts/gurbaniakhar.ttf.woff2') format('woff2'), 
     url('../../fonts/gurbaniakhar.ttf.woff') format('woff'), 
     url('../../fonts/gurbaniakhar.ttf.ttf') format('truetype'), 
     url('../../fonts/gurbaniakhar.ttf.svg#gurbaniakharregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Answer 4

Nell'ultimo Ionic2 RC, questo sembra essersi spostato da qualche parte sotto src/assets, probabilmente src/assets/fonts. I riferimenti a questi file nei file SCSS (come per @indermohan-singh) sono relativi al file CSS, quindi saranno come url("../assets/fonts/aleo-italic-webfont.woff2").

Tutto sotto src/assets viene copiato durante la compilazione, quindi è un buon posto per altre cose di cui avrete bisogno, ad esempio le immagini.

Answer 5

In ionico v2.1.0www la cartella viene generata ogni volta che si crea il progetto.

devi mettere i tuoi caratteri nella cartella src/assets come sotto.

@font-face { 
    font-family: 'montserratregular'; 
    src: url('../assets/montserrat/montserrat-regular-webfont.eot'); 
    src: url('../assets/montserrat/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../assets/montserrat/montserrat-regular-webfont.woff2') format('woff2'), 
     url('../assets/montserrat/montserrat-regular-webfont.woff') format('woff'), 
     url('../assets/montserrat/montserrat-regular-webfont.ttf') format('truetype'), 
     url('../assets/montserrat/montserrat-regular-webfont.svg#montserratregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Answer 6

1. aggiungere il file TTF ad attività> cartella dei font.

2. Apri la tua app> file app.scss. e incolla questo codice:

   @font-face { 
       font-family: 'Raleway'; 
       font-style: normal; 
       font-weight: 300; 
       src: local('Raleway Light'), local('Raleway-Light'), url("../assets/fonts/Raleway-Regular.ttf") format('woff2'); 
       unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 
   } 
   
   /* latin */ 
   @font-face { 
       font-family: 'Raleway'; 
       font-style: normal; 
       font-weight: 300; 
       src: local('Raleway Light'), local('Raleway-Light'), url("../assets/fonts/Raleway-Regular.ttf") format('woff2'); 
       unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 
   

   }

3. Rename 'Raleway-Light' e 'Raleway-Regular.ttf' con il file .ttf.

4. Run ionica servire

Answer 7

Il modo migliore per aggiungere propri caratteri sta usando sorso. Aggiungo i miei caratteri personalizzati nella directory app/theme/fonts e aggiungo questa sorgente al plugin gulp ionic-gulp-fonts-copy nel file gulpfile.js.

// add own src 
gulp.task('fonts', function(){ 
    return copyFonts({ 
    src: [ 
     'node_modules/ionic-angular/fonts/**/*.+(ttf|woff|woff2)', 
     'app/theme/fonts/**/*.+(ttf|woff|woff2)' 
    ], 
    dest: 'www/build/fonts' 
    }) 
}); 

La prima riga src è di default, secondo è personalizzato. Dopo questo, puoi dichiarare il tuo font con css, e. g.

/* regular */ 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Open Sans'), local('OpenSans'), url(../fonts/opensans/OpenSans-Regular.ttf) format('truetype'); 
} 

Provalo!

Answer 8

ionico 2 durante la compilazione, crea www/build/main.css se si controlla il percorso del font su app.scss di solito è ../../assets, ma quel punto non va da nessuna parte durante la compilazione.

add on app.scss percorso come ../assets/fonts/fontname.ttf e aggiungere il tipo di carattere su www/beni/fonts/fontname.ttf

ha funzionato perfetto per me.

Answer 9

Ora che la polvere si è risolta con Ionic 2/Angular 2, spero che questa sia la risposta giusta per un po '.

Ho scaricato "Varela Round" da Google font e semplificato il nome del file, ma il nome del font è rimasto lo stesso.

Aggiungi il tuo carattere a ./src/assets/fonts. Modifica ./src/theme/variables.scss. Nella sezione "Caratteri" in fondo, importare il tipo di carattere:

@import '../assets/fonts/varela-round.ttf'; 

Poi, nel tuo regolare CSS:

font-family: 'Varela Round'; 

Modifica per i font non Google:

• Questo doesn funziona con .otf e non sono sicuro di .woff. Potrebbe essere necessario eseguire il tuo font attraverso un convertitore.
• Se non si è sicuri del nome del font, installarlo prima sul sistema locale e utilizzare tale nome. Ho appena fatto questo con un font chiamato "Fertigo" che ha installato come "Fertigo Pro"

EDIT

non ho potuto ottenere questo soluzione per lavorare su iOS, ma il seguente fa.

Prima di tutto, mi scuso per aver dimenticato dove avevo il font Varela Round.Ho capito che funziona con un font diverso e sto usando questo come esempio qui.

Aggiungere il carattere come indicato sopra, ma non preoccuparsi di importarlo in variables.scss. Invece, aggiungere il seguente al app/app.scss:

@font-face { 
    font-family: 'Fertigo'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Fertigo Pro'), local('Fertigo-Pro'), url(../assets/fonts/fertigo.ttf) format('woff2'); 
} 

Se format('woff2'); non funziona, potrebbe essere necessario provare TrueType invece.

Answer 10

Su ionico 3.4, esaminare il variables.scss, squadra ionica percorso del font già preimpostato $font-path: "../assets/fonts"; Quindi, basta mettere i file dei font nella cartella assets/fonts, quindi aggiungere codice riportato di seguito variables.scss

ion-app.ios { font-family: "your-font-name" !important; }

voi ora dovresti impostare il tuo carattere personalizzato globale in questo modo

Answer 11

In Ionico 3,4 metti il ​​tuo font in asset/fonts (il percorso è specificato in src/theme/variables.scss).

In src/app/inserire app.scss il font-face

@font-face { 
    font-family: 'Raleway'; 
    font-style: normal; 
    font-weight: 300; 
    src: local('Raleway'), local('Raleway-Regular'), url("../assets/fonts/Raleway-Regular.ttf") format('woff2'); 
} 

Infine utilizzare il tipo di carattere in src/tema/variables.scss ignorando le variabili Sass

$font-family-base: 'Raleway'; 
$font-family-ios-base: 'Raleway'; 
$font-family-md-base: 'Raleway'; 
$font-family-wp-base: 'Raleway'; 

Answer 12

sto lavorando su ionic3-

cli packages: (/usr/local/lib/node_modules) 

    @ionic/cli-utils : 1.10.1 
    ionic (Ionic CLI) : 3.10.1 

global packages: 

    Cordova CLI : 7.0.1 

local packages: 

    @ionic/app-scripts : 2.1.4 
    Cordova Platforms : android 6.2.3 ios 4.4.0 
    Ionic Framework : ionic-angular 3.6.0 

System: 

    ios-sim : 5.0.8 
    Node : v8.4.0 
    npm  : 5.4.0 
    OS  : OS X 

ho creato un nuovo file css come style.css e scrivo queste righe lì-

@font-face { 
     font-family: 'sans_medium'; 
     src: url('../path/to/css/fonts/Regular.otf'); 
    } 
    /*if need more font-face*/ 
    @font-face { 
     font-family: 'sans_regular'; 
     src: url('fonts/SanFranciscoText-Regular.otf'); 

    } 

collegato questo file css con indice AS

src/index.html 

e ha aggiunto questa linea

<link href="css/animate.css" rel="stylesheet"> 

Questo sta lavorando per me ...

Answer 13

In ionic2 basta creare una cartella caratteri in src/assets/quindi inserire il file del font .ttf e .woff a includi anche il tuo file sass in esso custom-fonts.scss. Dopo aver servito il tuo gulp, copierà automaticamente tutti i tuoi file sotto www/assets/fonts/