web-dev-qa-db-ja.com

ionicデフォルトのフォントを変更

この質問は、以下のリンクで以前に尋ねられ、回答されたことを知っています。すべてのcssに追加せずにデフォルトのフォントを変更したい。

私が試したもの：

  1. .tff、.eot、.woff、.svgファイルを直接変更して、フォントとイオニコンをマージする
  2. Htmlおよびcssファイルで指定してフォントを実装しようとしました（動作しますが、デフォルトにしたい）
  3. Www/lib/ionic/fontsをopen-sansフォントで上書きします（iononは消えます）
  4. 最初のリンクを使用するとき（すべての書式設定はなくなり、テキストとボタンのみが残ります）、scss/ionic.app.scssのフォントフェイスを上下に配置しようとしました

助けてください！私が見た答えは指示ですが、それがどのように機能するかの説明はありません。 「イオン設定Sass」がどのように機能するか/何をするのかわかりません。 gulpがこれに関与する方法。

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
17
Sherlin

すべてをインポートfont filesアプリに。

例：

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

アプリ全体でこのフォントが必要な場合は、このようにしてください

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

疑問がある場合はお知らせください。ありがとう

12
Muhsin

Ionic 2の正しい解決策は、$font-family-base変数 とその仲間。これが、Ionicを実行する方法です。プラットフォームごとに異なるフォントを使用するなど）より多くの制御を提供し、!importantキーワード、これは常に良いことです。

Ionic 3.3を使用して、variables.scssそして「共有変数」セクションを見つけます。次の行を追加します。

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

Ionic 2：fonts.google.comからフォントをダウンロードし、assetsフォルダーに貼り付けます。scssファイルで次の手順を実行します。

@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

Ionic 4

コンポーネント間で共有されるグローバル変数があります。 --ion-font-familyはそのうちの1つです。 :rootのvariables.scssの下のプロパティにこれを追加します。

  :root {
      --ion-font-family: 'MyFont';
  }

Ionic 4 Docs： 高度なテーマのドキュメント

5
codeherk

ちなみにアイコンのフォントを置き換えたくないので、CSS3 not（）プロパティを使用する必要があります

たとえば、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

アイコンをsvg形式で含めることができます。

すべての最新のioniconsを含むリストを次に示します。 https://github.com/Orlandster1998/ionicons-svg

0
Orlandster