Police personnalisée avec Ionic2

Ne placez pas vos polices dans node_modules ou construire dossier. node_modules le dossier est mise à jour sur npm install ou npm mettre à jour et renforcer le dossier est créé avec chaque commande de construction.

Meilleure façon possible, que je suis actuellement en utilisant avec une production de l'app est de mettre vos polices de caractères à l'intérieur de www/fonts dossier et faire référence à l'intérieur de votre /app/thèmes/app.de base.scss comme ci-dessous.

@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;
}

Maintenant que la poussière est retombée avec Ionique 2 /Angulaire 2 j'espère que ce sera la bonne réponse pour un certain temps.

J'ai téléchargé "Varela Ronde" de Google polices et simplifié le nom de fichier, mais le nom de la police est restée la même.

Ajouter à votre police d' ./src/assets/fonts.
Edit ./src/theme/variables.scss.
En vertu de la "Polices" à la fin, l'importation de la police:

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

Ensuite dans votre CSS:

  font-family: 'Varela Round';

Modifier pour les non-Google fonts:

• Cela ne fonctionne pas avec .otf et je n'en suis pas sûr à propos de .woff. Vous pouvez avoir besoin pour exécuter votre police par l'intermédiaire d'un convertisseur.
• Si vous n'êtes pas sûr du nom de la police, de l'installer sur votre système local en premier et d'utiliser ce nom. J'ai juste fait avec une police appelée "Fertigo" installé comme "Fertigo Pro"

MODIFIER

Je ne pouvais pas obtenir cette solution fonctionne sur iOS, mais ce qui suit ne.

Tout d'abord, je m'excuse pour oublier où j'ai eu la Varela Ronde de police. J'ai eu ce travail avec une police différente et j'utilise que comme un exemple ici.

Ajoutez la police comme mentionné ci-dessus, mais ne vous inquiétez pas de l'importer dans le variables.scss.
Au lieu de cela, ajoutez les lignes suivantes à 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');
}

Si format('woff2'); ne fonctionne pas, vous devrez peut-être essayer truetype à la place.

Les polices de caractères dans la construction disappers à chaque fois que le gulp construire nettoie le dossier de création à chaque fois. Pour éviter cela, vous devez inclure le gulp tâches dans le gulpfile.ts.

Modifier les changements suivants à votre gulpfile.ts.

• Inclure gulp tâche pour l'ajout de l'icône de css et polices de votre construction

   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'))
     });
  

• Modifier votre gorgée de construire et de regarder tâche comme suit (en Ajoutant votre police
  et css sur la montre et à construire)

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

La meilleure façon d'ajouter vos propres polices à l'aide de gulp. - Je ajouter mes polices personnalisées dans le répertoire app/theme/fonts et ajouter cette source à l'gulp plugin ionic-gulp-fonts-copy dans le fichier 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 première ligne dans src est par défaut, la seconde est la coutume. Après cela, vous pouvez déclarer vos polices avec 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');
}

L'essayer!

1. Ajouter votre ttf fichier d'actifs>dossier polices.

2. Ouvrir votre application>app.scss fichier. et collez ce code:

   @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. Renommer 'Raleway-Lumière' et 'Raleway-Régulier.ttf " avec votre .ttf fichier.

4. Exécuter ionique servir

Je suis en train de travailler sur 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

Je Créée un nouveau fichier css comme style.css et d'écrire ces lignes 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');

    }

Lié à ce fichier css avec index-

src/index.html

et a ajouté cette ligne

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

C'est de travailler pour moi ...

Dans Ionique 4 il n'y a pas d'application.scss plus de style et a déménagé à la CSS de variables et la configuration principale est dans ./theme/variables.scss.

Utiliser mes propres polices, j'ai mis les polices dans le ./assets/fonts dossier (que j'ai créé).

Dans ./theme/variables.scss j'ai ajouté:

@font-face {
  font-family: 'Muli';
  font-weight: normal;
  src: url("../assets/fonts/muli-regular.ttf");
}
@font-face {
  font-family: 'Muli';
  font-weight: 300;
  src: url("../assets/fonts/muli-light.ttf");
}

:root {
  --ion-font-family: 'Muli', 'Roboto', 'Helvetica Neue', sans-serif;