Пользовательский шрифт с Ionic2

Question

В моем проекте Ionic2 я помещал свои шрифты (формат ttf) в папку www/build/fonts. Но когда я создаю приложение, шрифты исчезают.

Как я могу это сделать?

Answer 1

Ionic 2 использует модуль npm, называемый копией ионно-глоссовых шрифтов. Эта задача gulp будет загружать шрифты, присутствующие в каталоге node_modules/ionic-angular/fonts. Почему бы вам не попробовать разместить шрифт в этом каталоге и повторить попытку?

(Размещение ваших шрифтов в папке сборки будет бесполезным, так как папка сборки удаляется и создается каждый раз при создании сборки приложения).

Надеюсь, это вам поможет. Благодарю.

Answer 2

Шрифты в сборке исчезают каждый раз, когда сборка gulp каждый раз очищает папку сборки. Чтобы этого избежать, вам нужно включить задачи gulp в gulpfile.ts.

Измените приведенные ниже изменения в gulpfile.ts.

• Включить задачу глотка для добавления значков CSS и шрифты к вашей сборке

  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')) 
      }); 
  

• Измените глоток сборку и смотреть задачу следующим образом (Добавление шрифта и CSS на часах и строительство)

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

Answer 3

Не помещайте свои шрифты в node_modules или build. Папка node_modules получает обновление по установке npm или npm, а сборка создается с каждой командой сборки.

Лучший возможный путь, что я в настоящее время использую с производства приложения, чтобы положить ваши шрифты внутри WWW/шрифты папку и ссылаться на них внутри /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; 
} 

Answer 4

В последнем Ionic2 RC, это, кажется, переместились куда-то под src/assets, вероятно, src/assets/fonts. Ссылки на эти файлы в ваших SCSS-файлах (в соответствии с @ indermohan-singh) относятся к файлу CSS, поэтому он будет выглядеть как url("../assets/fonts/aleo-italic-webfont.woff2").

Все под src/assets копируется во время сборки, поэтому это хорошее место для других вещей, которые вам понадобятся, то есть изображений.

Answer 5

In ionic v2.1.0www Папка создается каждый раз при создании проекта.

Вы должны поместить свои шрифты в папку 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; 
} 

Answer 6

1. Добавить файл TTF в активы> папку шрифтов.

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. Rename 'Raleway-Light' и 'Raleway-Regular.ttf' с файлом .ttf.

4. Run ионного служить

Answer 7

Лучшим способом добавить собственные шрифты использует глотку. Я добавляю свои пользовательские шрифты в каталог 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 по умолчанию, вторая - обычная. После этого вы можете объявить свой шрифт css, например. г.

/* 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'); 
} 

Попробуйте!

Answer 8

ионный 2 при компиляции создает www/build/main.css, если вы проверите , путь шрифта на app.scss обычно есть ../../assets, но этот момент нигде во время сборки.

добавить на app.scss пути, как ../assets/fonts/fontname.ttf и добавить шрифт на WWW/активы/шрифты/fontname.ttf

она работала идеально подходит для меня.

Answer 9

Теперь, когда пыль оседает с помощью ионного 2/углового 2, я надеюсь, что это будет правильный ответ на некоторое время.

Я загрузил «Varela Round» из Google шрифтов и упростил имя файла, но имя шрифта оставалось прежним.

Добавить шрифт в ./src/assets/fonts. Редактировать ./src/theme/variables.scss. В разделе "Шрифты" в нижней части, импортировать шрифт:

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

Тогда в обычной CSS:

font-family: 'Varela Round'; 

Edit для не Google шрифтов:

• Это Безразлично Не работайте с .otf, и я не уверен насчет .woff. Возможно, вам понадобится запустить свой шрифт через конвертер.
• Если вы не уверены в имени шрифта, сначала установите его в своей локальной системе и используйте это имя. Я просто сделал это со шрифтом под названием «Fertigo», который установлен как «Fertigo Pro»

EDIT

я не мог получить это решение работать на IOS, но следующий делает.

Во-первых, прошу прощения за то, что у меня был шрифт Varela Round.Я получил эту работу с другим шрифтом, и я использую это в качестве примера здесь.

Добавьте шрифт, как указано выше, но не беспокойтесь, импортируя его в 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 вместо этого.

Answer 10

На ионическом 3.4, Загляните в variables.scss, команда Ионной уже запрограммированный путь шрифта $font-path: "../assets/fonts"; Так просто поместить файлы шрифтов под assets/fonts папку, а затем добавьте следующий код в variables.scss

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

вам должен теперь установить свой глобальный пользовательский шрифт таким образом

Answer 11

В Ионный 3.4 поместите свой шрифт в свойство/fonts (путь указан в src/theme/variables.scss).

В ЦСИ/приложение/app.scss вставки шрифта лицо

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

Наконец использовать свой шрифт в ИПВ/тема/variables.scss переопределение переменных Sass

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

Answer 12

Я работаю на 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'); 

    } 

Linked этот CSS-файл с индексом как-

src/index.html 

и добавили эту строку

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

Это работает для меня ...

Answer 13

В ionic2 просто создать папка шрифты под src/assets/затем поместите файл шрифта .ttf и .woff a lso включить ваш sass файл в него custom-fonts.scss. После того, как ваш глоток подаст, он автоматически скопирует все ваши файлы по адресу www/assets/fonts/