web-dev-qa-db-fra.com

Police personnalisée avec Ionic2

Dans mon projet Ionic2, je mets mes polices (format ttf) dans le dossier www/build/fonts . Mais lorsque je construis l'application, les polices disparaissent.

Comment puis-je faire ?

ionic2
18
user6008509

Ne placez pas vos polices dans le dossier node_modules ou build . Le dossier node_modules est mis à jour lors de l'installation de npm ou la mise à jour de npm et le dossier de construction est créé avec chaque commande de construction.

La meilleure façon possible d’utiliser une application de production est de placer vos polices dans le dossier www/fonts et de les référencer dans votre /app/themes/app.core.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;
}
23
Indermohan Singh

Dans la dernière version de Ionic2 RC, cela semble être passé quelque part sous src/assets, probablement src/assets/fonts. Les références à ces fichiers dans le vôtre Les fichiers SCSS (selon @ indermohan-singh) sont relatifs au fichier CSS et ressembleront à url("../assets/fonts/aleo-italic-webfont.woff2").

Tout ce qui se trouve sous src/assets est copié pendant la construction. C’est donc un bon endroit pour d’autres choses dont vous aurez besoin, comme les images.

15
Sam Mason

Maintenant que la poussière est retombée sur Ionic 2/Angular 2, j’espère que ce sera la bonne réponse pendant un moment.

J'ai téléchargé "Varela Round" à partir des polices de Google et simplifié le nom du fichier, mais le nom de la police est resté le même.

Ajoutez votre police à ./src/assets/fonts. Éditez ./src/theme/variables.scss. Sous la section "Polices" en bas, importez votre police:

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

Puis dans votre CSS habituel:

  font-family: 'Varela Round';

Modifier pour les polices non Google:

  • Cela ne fonctionne pas avec .otf et je ne suis pas sûr de .woff. Vous devrez peut-être exécuter votre police via un convertisseur.
  • Si vous n'êtes pas sûr du nom de la police, installez-la d'abord sur votre système local et utilisez ce nom. Je viens de faire cela avec une police appelée "Fertigo" qui a été installée en tant que "Fertigo Pro"

MODIFIER

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

Tout d'abord, je m'excuse d'avoir oublié l'endroit où j'avais la police Varela Round. Je travaille avec une police différente et je l’utilise comme exemple ici.

Ajoutez la police comme indiqué ci-dessus, mais importez-la au format variables.scss..__, à la place, ajoutez ce qui suit à 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.

4
leetheguy

Dans Ionic 3.4 mettez votre police dans asset/fonts (le chemin est spécifié dans src/theme/variables.scss).

Dans src/app/app.scss, insérez la fonte-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');
}

Enfin, utilisez votre police dans src/theme/variables.scss en remplaçant les variables sass

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

Les polices de la construction disparaissent à chaque fois que la construction gulp nettoie le dossier de la construction à chaque fois. Pour éviter cela, vous devez inclure les tâches gulp dans le fichier gulpfile.ts. 

Modifiez les modifications ci-dessous dans votre fichier gulpfile.ts.

  • Inclut la tâche gulp pour ajouter les icônes css et fonts à 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'))
   });

  • Modifiez votre tâche de construction et de surveillance gulp comme suit (Ajout de votre police Et de css sous surveillance et création)

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

Sur Ionic 3.4 , regardez dans variables.scss, l’équipe ionique a déjà prédéfini le chemin de la police $font-path: "../assets/fonts"; Vous devez simplement placer vos fichiers de polices dans le dossier assets/fonts, puis ajouter le code suivant dans variables.scss

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

vous devez maintenant définir votre police personnalisée globale de cette manière

1
fifth

La meilleure façon d'ajouter ses propres polices est d'utiliser gulp. J'ajoute mes polices personnalisées dans le répertoire app/theme/fonts et ajoute cette source au plugin gulp ionic-gulp-fonts-copy du 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 la valeur par défaut, la seconde est personnalisée. Après cela, vous pouvez déclarer votre police 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');
}

Essaye le!

1
Alexander Schmidt

Dans ionic v2.1.0 www, le dossier est généré à chaque fois que vous générez votre projet.

vous devez placer vos polices dans le dossier src/assets comme ci-dessous.

@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;
}
1
Milap Shah

Je travaille 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

J'ai créé un nouveau fichier css en tant que style.css et écris ces lignes

    @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 à l'index as-

src/index.html

et ajouté cette ligne

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

Cela fonctionne pour moi ...

0
S.Yadav
  1. Ajoutez votre fichier ttf au dossier assets> fonts.

  2. Ouvrez votre application> fichier app.scss. 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. Renommez 'Raleway-Light' et 'Raleway-Regular.ttf' avec votre fichier .ttf.

  4. Exécuter un service ionique

0
Burhan Gül

Dans ionic2, créez simplement un dossier fonts sous src/assets /, puis placez votre fichier de polices .ttf et .woff ainsi que votre fichier sass dans custom-fonts.scss. Une fois que vous avez servi, il copiera automatiquement tous vos fichiers sous www/assets/fonts /.

0
co0kie

ionic 2 lors de la compilation, crée www/build/main.css si vous cochez le chemin de la police sur app.scss est généralement ../../assets, mais ce point n’est nulle part pendant la construction.

ajoutez sur app.scss le chemin du type ../assets/fonts/fontname.ttf et ajoutez la police sur www/assets/fonts/fontname.ttf

cela a fonctionné parfaitement pour moi.

0
Ricardo Gellman

Dans Ionic 4 il n'y a plus d'app.scss plus longtemps et le style a été déplacé vers les variables CSS et la configuration principale est dans ./theme/variables.scss.

Pour utiliser mes propres polices, je les mets dans le dossier ./assets/fonts (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;
0
Martin M