web-dev-qa-db-fra.com

police par défaut de changement ionique

Je sais que cette question est posée et répondue auparavant dans les liens ci-dessous. Je veux changer la police par défaut sans avoir à ajouter à chaque css. 

Choses que j'ai essayées:

  1. Changer le fichier .tff, .eot, .woff, .svg directement pour fusionner mes polices et mes ionicons 
  2. J'ai essayé d'implémenter la police en la spécifiant dans les fichiers html et css (cela fonctionne, mais je veux que ce soit la valeur par défaut)
  3. Écraser les polices www/lib/ionic/avec la police open-sans (les ionicons disparaissent)
  4. Lorsque j'utilise le premier lien (toute la mise en forme a disparu, il ne reste que du texte et des boutons). J'ai également essayé de placer la police de caractères face supérieure et inférieure dans scss/ionic.app.scss

S'il vous plaît aider! Les réponses que j'ai vues sont des instructions mais pas d'explication sur le fonctionnement. Je ne sais pas comment fonctionne "ionic setup sass"/ce qu'il fait. Comment gulp joue un rôle dans cela.

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

cssionic-frameworksass
14
Sherlin

Importez tous lesfont filesin dans votre application.

Exemple:

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

Si vous voulez cette police dans toute l'application, il suffit de donner comme ça

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

Si vous avez des doutes.Veuillez me le faire savoir.Merci

12
Muhsin

La solution correcte pour Ionic 2 devrait être de changer la $font-family-basevariable et ses amis. C'est comme ça que Ionic est fait pour le faire. Cela vous donne plus de contrôle (comme avoir différentes polices par plate-forme) et évite le mot clé !important, ce qui est toujours une bonne chose.

Avec Ionic 3.3, accédez à votre variables.scss et recherchez la section "Variables partagées". Ajoutez ces lignes:

$font-family-base: 'MyFont';
$font-family-ios-base: 'MyFont';
$font-family-md-base: 'MyFont';
$font-family-wp-base: 'MyFont';
30
Coo

Pour Ionic 2: Téléchargez les polices à partir de fonts.google.com et collez-les dans votre dossier de ressources. Maintenant, dans votre fichier scss, procédez comme suit:

@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;
}
5
Surya Shukla

En passant, vous ne voulez pas remplacer la police de l'icône, vous devriez donc utiliser la propriété CSS3 not ()

Par exemple, dans app.scss:

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

  *:not(ion-icon) {
    font-family: 'Varela Round', sans-serif!important;
  }
4
Guillaume Le Mière

Vous pouvez simplement inclure vos icônes au format svg.

Voici une liste avec les dernières ionicons: https://github.com/Orlandster1998/ionicons-svg

0
Orlandster