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

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

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

Ответы

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

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

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

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

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

Затем в вашем обычном CSS:

  font-family: 'Varela Round';

Изменить шрифты, отличные от Google:

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

ИЗМЕНИТЬ

Я не мог заставить это решение работать в 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.

Ответ 4

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

В src/app/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');
}

Наконец, используйте ваш шрифт в src/theme/variables.scss, переопределяя переменные sass

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

Ответ 5

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

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

Включите задачу gulp для добавления значка 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'))
   });

Измените задачу сборки и просмотра gulp следующим образом (добавление шрифта и css на смотреть и строить)
```
 gulp.task('watch', ['clean'], function(done){
   //existing ionic2 code
 }
 gulp.task('build', ['clean','myCss','myFonts'], function(done){
  //existing ionic2 code
 }
```

Ответ 6

В ионной папке v2.1.0 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;
}

Ответ 7

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

Попробуйте!

Ответ 8

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

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

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

Ответ 9

Добавьте свой файл ttf в папку "Свойства" > "Шрифты".

Откройте приложение 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;

}

Переименуйте "Raleway-Light" и "Raleway-Regular.ttf" с вашим .ttf файлом.
Запуск ионной службы

Ответ 10

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

добавить на app.scss путь, например.. /assets/fonts/fontname.ttf, и добавить шрифт на www/assets/fonts/fontname.ttf

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

Ответ 11

Я работаю над 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 с индексом как -

src/index.html

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

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

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

Ответ 12

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

Ответ 13

В 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;

Ответ 14

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

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

Надеюсь, это поможет вам. Спасибо.