web-dev-qa-db-ja.com

Ionic 4？に新しいフォントをインストールするにはどうすればよいですか？

Ionic 4のフォントを更新する方法を知っていますか？

Aileron.woffをasset/fontsに追加し、これをvariables.scssに入れて無駄にしました。

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

これが、カスタムフォントをIonicアプリケーションに追加する方法です。

  1. フォントファイルを含むディレクトリをプロジェクトのsrc\assets\fontsフォルダーの下に追加します

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

  2. ファイル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. 同じファイルsrc\theme\variables.scssで、:root要素を編集して、カスタムフォントをIonicアプリケーションのフォントとして定義します。

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

Ionic 4/Angular。

Ionic 4.0.0ベータ版のテンプレート「blank」でテストアプリを作成しました。プラットフォーム間ですべてのフォントを変更するためにvariable.sccsに入れたものは次のとおりです。

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

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

私のMacには「Palatino」が表示されます。

重要なのは、「！important」を使用することです。ベータ版に関する限り、フォントのテーマはまだ文書化されていません。後で明確になるか、最終的に動作が変わる可能性があります。これを覚えておいてください。

6
Andreas Manessinger

ディレクトリ「assets」にフォントを追加します

ファイル「variables.cscc」に書き込みます

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

そして、あなたのxx.page.htmlに書いてください

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

よろしく

4
deimon
  1. ディレクトリフォルダーにカスタムフォントを追加src\assets\fonts
  2. ファイル内のフォントを定義するsrc\theme\variables.scss前：root

@ font-face {font-family： "カスタムフォント"; src：url（ "../ assets/fonts/Custom Font.xxx"）; }

  1. カスタムフォントを定義しますin：root

--ion-font-family： "カスタムフォント";

2
mohammad MRAD

CSS4変数 -ion-font-family を使用する必要があります。

以下に例を示します。

<!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