Jak nainstalovat nové fonty v iontových 4?

hlasů
0

Ví někdo, jak aktualizovat font pro Ionic 4?

Snažil jsem se přidáním aileron.woff na aktiva / fonts a uvedení toto v variables.scss bezvýsledně.

  src: url('../assets/fonts/aileron.woff') format('woff');
Položena 08/08/2018 v 19:22
zdroj uživatelem
V jiných jazycích...                            


6 odpovědí

hlasů
-1

Budete chtít používat CSS4 variabilní --ion-font-family

Zde je příklad:

<!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/core@4.0.0-beta.2/dist/ionic.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@ionic/core@4.0.0-beta.2/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>

Odpovězeno 08/08/2018 v 23:15
zdroj uživatelem

hlasů
1

Zdá se, že zájem o Ionic 4 / úhlové.

Právě jsem vytvořil testovací aplikace s šablonou „prázdnou“ v Ionic 4.0.0 beta. Tady je to, co jsem dal do variable.sccs změnit všechna písma napříč platformami:

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

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

Na mém Macu vidím „Palatino“.

Klíčem k úspěchu je, aby použít! „Důležité“. Co se týče Beta jde, motivů písem ještě není zdokumentována. To může být objasněno později, nebo chování může změnit v konečné. Mějte to na paměti.

Odpovězeno 19/08/2018 v 07:21
zdroj uživatelem

hlasů
8

To je, jak se mi podařilo přidat vlastní písmo mé žádosti Ionic

  1. Přidejte adresář, který obsahuje soubory písem do projektu ve složce src\assets\fonts

    src\assets\fonts\myCustomFont
     |
     +-- MyCustomFontBold.ttf
     +-- MyCustomFontBoldItalic.ttf
     +-- MyCustomFontItalic.ttf
     +-- MyCustomFontRegular.ttf
    
  2. Definovat písma v souboru 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');
}

  1. Ve stejném souboru src\theme\variables.scss, upravte :rootprvek definovat svůj vlastní písmo jako písmo aplikace Ionic:

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

Odpovězeno 16/01/2019 v 17:13
zdroj uživatelem

hlasů
0
  1. Přidat vlastní písmo ve složce adresář src\assets\fonts
  2. Definovat písma v souboru src\theme\variables.scss předtím: kořen

@ Font-face {font-family: "vlastní písmo"; src: url ( "../ aktiva / fonts / Custom Font.xxx"); }

  1. definovat své vlastní písmo v: kořen

--ion-font-family: "Custom Font";

Odpovězeno 08/04/2019 v 22:35
zdroj uživatelem

hlasů
1

Přidat jste písmo v adresáři „aktiv“

V souboru „variables.cscc“ write

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

A ve svém xx.page.html write

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

pozdravy

Odpovězeno 16/05/2019 v 20:44
zdroj uživatelem

hlasů
0

1.Include TTF soubor písma uvnitř src / aktiv / fonts / složky.

2.Now vytvořit rodinu písma tím, že bude v global.scss (src / global.scss) EX:@font-face { font-family: 'CustomfontName'; src: url('./assets/fonts/CustomFont.ttf'); }

3.Apply styl

<ion-content>
  <div style='font-family:CustomfontName'>
      Sample text for custom font
  </div>
</ion-content>

Pro lepší pochopení klikněte níže odkaz,

https://www.youtube.com/watch?v=Hz7SLdGG8HA

Odpovězeno 21/01/2020 v 08:50
zdroj uživatelem

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more