web-dev-qa-db-fra.com

Comment installer de nouvelles polices dans Ionic 4?

Est-ce que quelqu'un sait comment mettre à jour la police pour Ionic 4?

J'ai essayé d'ajouter l'aileron.woff aux ressources/polices et de le mettre dans le fichier variables.scss, mais en vain.

  src: url('../assets/fonts/aileron.woff') format('woff');
ionic-frameworkionic4
12
Troy DC Thompson

C’est ainsi que j’ai réussi à ajouter une police personnalisée à mon application Ionic

  1. Ajoutez un répertoire contenant les fichiers de polices au projet sous le dossier src\assets\fonts

    src\assets\fonts\myCustomFont
 |
 +-- MyCustomFontBold.ttf
 +-- MyCustomFontBoldItalic.ttf
 +-- MyCustomFontItalic.ttf
 +-- MyCustomFontRegular.ttf

  2. Définir les polices dans le fichier src\theme\variables.scss:

    @font-face {
  font-family: 'My Custom Font';
  font-style: normal;
  font-weight: normal;
  src: url('../assets/fonts/myCustomFont/MyCustomFontRegular.ttf');
}

@font-face {
  font-family: 'My Custom Font';
  font-style: normal;
  font-weight: bold;
  src: url('../assets/fonts/myCustomFont/MyCustomFontBold.ttf');
}

@font-face {
  font-family: 'My Custom Font';
  font-style: italic;
  font-weight: normal;
  src: url('../assets/fonts/myCustomFont/MyCustomFontItalic.ttf');
}

@font-face {
  font-family: 'My Custom Font';
  font-style: italic;
  font-weight: bold;
  src: url('../assets/fonts/myCustomFont/MyCustomFontBoldItalic.ttf');
}

  3. Dans le même fichier src\theme\variables.scss, éditez le :root élément pour définir votre police personnalisée en tant que police de l’application Ionic:

    --ion-font-family: 'My Custom Font';
35
Strider

Vous semblez être intéressé par Ionic 4/Angular.

Je viens de créer une application de test avec un modèle "vide" dans Ionic 4.0.0 beta. Voici ce que j'ai mis dans variable.sccs pour changer toutes les polices sur toutes les plates-formes:

:root,
:root[mode=ios],
:root[mode=md] {
  --ion-font-family: "Palatino", "Times New Roman", serif !important;

  font-family: "Palatino", "Times New Roman", serif !important;
}

Sur mon Mac, je vois "Palatino".

La clé est d'utiliser "! Important". En ce qui concerne la version bêta, la thématisation des polices n'est pas encore documentée. Cela peut être clarifié plus tard ou le comportement peut changer en finale. Garde ça en tête.

6
Andreas Manessinger

Ajoutez votre police dans le répertoire "assets"

Dans le fichier "variables.cscc", écrivez

@font-face {
  font-family: 'custom';
  src: url('../assets/fonts/custom.ttf');
}
.text-custom{ 
  font-family: "custom"; 
}

Et dans votre xx.page.html, écrivez

<span class="text-custom">you text</span>

Cordialement

4
deimon
  1. Ajouter une police personnalisée dans le dossier de répertoires src\assets\fonts
  2. Définir les polices dans le fichier src\theme\variables.scssavant: racine

@ font-face {font-family: "Police personnalisée"; src: url ("../ assets/fonts/Custom Font.xxx"); }

  1. définissez votre police personnalisée in: root

--ion-font-family: "Police personnalisée";

2
mohammad MRAD

Vous voudrez utiliser la variable CSS4 - ion-font-family

Voici un exemple:

<!DOCTYPE html>
<html dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Test Font Family</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script src="https://unpkg.com/@ionic/[email protected]/dist/ionic.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@ionic/[email protected]/css/ionic.min.css">
  <style>
  @font-face {
    font-family: 'Hanalei Fill';
    font-style: normal;
    font-weight: 400;
    src: local('Hanalei Fill'), local('HanaleiFill-Regular'), url(https://fonts.gstatic.com/s/hanaleifill/v6/fC1mPYtObGbfyQznIaQzPQi8UAjA.woff2) format('woff2');
  }

  :root {
    --ion-font-family: 'Hanalei Fill';
  }
  :root[mode=md] {
    --ion-font-family: 'Hanalei Fill';
  }
  :root[mode=ios] {
    --ion-font-family: 'Hanalei Fill';
  }
  </style>
</head>

<body>
  <ion-app>
    <ion-header translucent>
      <ion-toolbar>
        <ion-title>Test</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content id="content" fullscreen>
      <ion-card>
        <ion-card-header>
          <ion-card-title>Font Family</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          Testing
        </ion-card-content>
      </ion-card>
    </ion-content>
  </ion-app>
</body>
</html>
0
Adam LaCombe