web-dev-qa-db-ja.com

Ionic2を使用したカスタムフォント

Ionic2プロジェクトでは、フォルダー（www/build/fonts）にフォント（ttf形式）を配置します。しかし、アプリをビルドすると、フォントが消えます。

どのようにできるのか ？

ionic2
18
user6008509

node_modulesまたはbuildフォルダーにフォントを配置しないでください。 node_modulesフォルダーはnpm installまたはnpm updateで更新を取得し、ビルドフォルダーは各ビルドコマンドで作成されます。

私が現在プロダクションアプリで使用している最良の方法は、www/fontsフォルダー内にフォントを配置し、/ app/themes/app.core.scss以下のようになります。

@font-face {
    font-family: 'gurbaniakharregular';
    src: url('../../fonts/gurbaniakhar.ttf.eot');
    src: url('../../fonts/gurbaniakhar.ttf.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/gurbaniakhar.ttf.woff2') format('woff2'),
         url('../../fonts/gurbaniakhar.ttf.woff') format('woff'),
         url('../../fonts/gurbaniakhar.ttf.ttf') format('truetype'),
         url('../../fonts/gurbaniakhar.ttf.svg#gurbaniakharregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
23
Indermohan Singh

最新のIonic2 RCでは、これは_src/assets_、おそらく_src/assets/fonts_の下のどこかに移動したようです。 SCSSファイル内のこれらのファイルへの参照（@ indermohan-singhによる）はCSSファイルに関連しているため、url("../assets/fonts/aleo-italic-webfont.woff2")のようになります。

_src/assets_の下にあるものはすべて、ビルド中にコピーされるため、必要な他のもの（画像など）に適した場所です。

15
Sam Mason

ほこりはIonic 2/Angular 2で落ち着いた。

Googleフォントから「Varela Round」をダウンロードし、ファイル名を簡略化しましたが、フォント名は変わりません。

フォントを_./src/assets/fonts_に追加します。 _./src/theme/variables.scss_を編集します。下部の[フォント]セクションで、フォントをインポートします。

_@import '../assets/fonts/varela-round.ttf';
_

次に、通常のCSSで：

_  font-family: 'Varela Round';
_

Google以外のフォントの編集：

  • これは_.otf_では機能せず、_.woff_についてはわかりません。コンバーターを介してフォントを実行する必要がある場合があります。
  • フォント名がわからない場合は、まずローカルシステムにインストールし、その名前を使用します。 「Fertigo Pro」としてインストールされた「Fertigo」というフォントでこれを行いました。

[〜＃〜] edit [〜＃〜]

このソリューションをiOSで動作させることはできませんでしたが、以下は動作します。

最初に、Varela Roundフォントの場所を忘れてしまったことをおaびします。私はこれを別のフォントで動作させ、ここで例として使用しています

上記のようにフォントを追加しますが、_variables.scss_にインポートする必要はありません。代わりに、以下を_app/app.scss_に追加します。

_@font-face {
  font-family: 'Fertigo';
  font-style: normal;
  font-weight: 400;
  src: local('Fertigo Pro'), local('Fertigo-Pro'), url(../assets/fonts/fertigo.ttf) format('woff2');
}
_

format('woff2');が機能しない場合は、代わりにtruetypeを試す必要があります。

4
leetheguy

Ionic 3.4でフォントをasset/fontsに配置します（パスはsrc/theme/variables.scssで指定されます）。

Src/app/app.scssにfont-faceを挿入します

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    src: local('Raleway'), local('Raleway-Regular'), url("../assets/fonts/Raleway-Regular.ttf") format('woff2');
}

最後に、src/theme/variables.scssのフォントを使用して、sass変数をオーバーライドします

$font-family-base: 'Raleway';
$font-family-ios-base: 'Raleway';
$font-family-md-base: 'Raleway';
$font-family-wp-base: 'Raleway';
3
emiska4

ビルドのフォントは、gulpビルドがビルドフォルダーを毎回クリーンアップするたびに無効になります。これを回避するには、gulpfile.tsにgulpタスクを含める必要があります。

以下の変更をgulpfile.tsに変更します。

  • アイコンcssおよびfontsをビルドに追加するためのgulpタスクを含める

     gulp.task('myCss', function(){
  return gulp.src('path-to-your-font-lib/style.css')
      .pipe(gulp.dest('www/build/css'))
   });
 gulp.task('myFonts', function(){
  return gulp.src('path-to-your-font-lib/fonts/**/*.+(eot|svg|ttf|woff)')
      .pipe(gulp.dest('www/build/fonts'))
   });

  • Gulpビルドとウォッチタスクを次のように変更します（ウォッチとビルドにフォントとCSSを追加します）

     gulp.task('watch', ['clean'], function(done){
   //existing ionic2 code
 }
 gulp.task('build', ['clean','myCss','myFonts'], function(done){
  //existing ionic2 code
 }
1
AishApp

Ionic 3.4で、variables.scss、Ionicチームがフォントパスを事前に設定済みである$font-path: "../assets/fonts";を調べるので、フォントファイルをassets/fontsフォルダーに置くだけです。 、次のコードをvariables.scssに追加します

ion-app.ios { font-family: "your-font-name" !important; }

この方法でグローバルカスタムフォントを設定する必要があります

1
fifth

独自のフォントを追加する最良の方法は、gulpを使用することです。ディレクトリapp/theme/fontsにカスタムフォントを追加し、このソースをgulpプラグインionic-gulp-fonts-copyファイルgulpfile.jsに追加します。

// add own src 
gulp.task('fonts', function(){
  return copyFonts({
    src: [
      'node_modules/ionic-angular/fonts/**/*.+(ttf|woff|woff2)',
      'app/theme/fonts/**/*.+(ttf|woff|woff2)'
    ],
    dest: 'www/build/fonts'
  })
});

srcの最初の行はデフォルトで、2番目の行はカスタムです。この後、cssでフォントを宣言できます。 g。

/* regular */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(../fonts/opensans/OpenSans-Regular.ttf) format('truetype');
}

やってみよう！

1
Alexander Schmidt

In ionic v2.1.wwwフォルダーは、プロジェクトをビルドするたびに生成されます。

以下のようにsrc/assetsフォルダにフォントを配置する必要があります。

@font-face {
    font-family: 'montserratregular';
    src: url('../assets/montserrat/montserrat-regular-webfont.eot');
    src: url('../assets/montserrat/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../assets/montserrat/montserrat-regular-webfont.woff2') format('woff2'),
         url('../assets/montserrat/montserrat-regular-webfont.woff') format('woff'),
         url('../assets/montserrat/montserrat-regular-webfont.ttf') format('truetype'),
         url('../assets/montserrat/montserrat-regular-webfont.svg#montserratregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
1
Milap Shah

私はionic3-に取り組んでいます

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.10.1
    ionic (Ionic CLI) : 3.10.1

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : Android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.0

System:

    ios-sim : 5.0.8 
    Node    : v8.4.0
    npm     : 5.4.0 
    OS      : OS X

新しいcssファイルをstyle.cssとして作成し、これらの行をそこに書き込みます。

    @font-face {
      font-family: 'sans_medium';
      src: url('../path/to/css/fonts/Regular.otf'); 
    }
   /*if need more font-face*/
    @font-face {
      font-family: 'sans_regular';
      src: url('fonts/SanFranciscoText-Regular.otf');

    }

このcssファイルをインデックスas-にリンクしました

src/index.html

この行を追加しました

<link href="css/animate.css" rel="stylesheet">

これは私のために働いています...

0
S.Yadav
  1. Ttfファイルをassets> fontsフォルダーに追加します。

  2. App> app.scssファイルを開きます。このコードを貼り付けます：

    @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    src: local('Raleway Light'), local('Raleway-Light'), url("../assets/fonts/Raleway-Regular.ttf") format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    src: local('Raleway Light'), local('Raleway-Light'), url("../assets/fonts/Raleway-Regular.ttf") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;

    }

  3. 「Raleway-Light」および「Raleway-Regular.ttf」の名前を.ttfファイルに変更します。

  4. 実行ionic serve

0
Burhan Gül

Ionic2では、src-assets /の下にフォルダーfontsを作成し、フォントファイル.ttfと.woffにsassファイルをcustom-fonts.scssに含めます。 gulpが配信されると、www/assets/fonts /の下にあるすべてのファイルが自動的にコピーされます

0
co0kie

コンパイル時にionic 2を使用すると、app.scssのフォントパスが通常../../assetsである場合にwww/build/main.cssが作成されますが、ビルド中はそのポイントはどこにもありません。

app.scssに../assets/fonts/fontname.ttfのようなパスを追加し、www/assets/fonts/fontname.ttfにフォントを追加します

それは私にとって完璧に機能しました。

0
Ricardo Gellman

Ionic 4にはapp.scssがなくなり、スタイル設定はCSS変数に移動し、メイン構成は./theme/variables.scss。

独自のフォントを使用するには、./assets/fontsフォルダ（私が作成した）。
_./theme/variables.scss 追加した：

@font-face {
  font-family: 'Muli';
  font-weight: normal;
  src: url("../assets/fonts/muli-regular.ttf");
}
@font-face {
  font-family: 'Muli';
  font-weight: 300;
  src: url("../assets/fonts/muli-light.ttf");
}

:root {
  --ion-font-family: 'Muli', 'Roboto', 'Helvetica Neue', sans-serif;
0
Martin M