Перейти к содержимому


Фотография
- - - - -

Не получается использовать шрифты в Jblank


Сообщений в теме: 14

#1 alexmixaylov

alexmixaylov

Отправлено 13 February 2015 - 16:07

первый раз использую ваш шаблон, все очень нравиться!!!
Также решил учить LESS , раньше только CSS использовал
 
Хочу использовать бутсрап(сетка и некоторые плюшки)
Столкнулся с некоторыми проблемами, перерыл интернет, не смог решить(мало опыта LESS)
 

отредактировал template.less

@import "bootstrap/bootstrap.less"; 
@import "misc/mixins";      // custom mixin libs
@import "misc/aliases";     // popuplar mixin's names 

в  mixins оставил только секцию #font {}
в aliases только  .font-face 
иначе конфликтует с бутсрап
 
шрифты закинул в папку fonts, как вы рекомендовали
теперь прописываю стиль

если руками в отладчике прописать, то шрифт подтягивается 

#copyright{
    padding: 1em;
    .font-face('LatoThin', 'Lato-Thin');
}

такая запись  ничего не дает, фонт фемили не прописывается просто


  • 0

#2 Cheren-dow

Cheren-dow

Отправлено 14 February 2015 - 15:44

alexmixaylov, видимо путь до шрифта не задан или не верный, 3 параметр


  • 1
Изображение
 

#3 woodman

woodman

Отправлено 04 June 2015 - 21:17

Объясните, кто в теме, более подробно об использовании кастомных шрифтов. Вроде бы и понятно, но что-то упускаю.

 

Вот смотрю я mixin и там есть такая запись

.font-face(@name, @filename, @path:'@{fontpath}/', @weight:normal, @style:normal) {
    #font > .include(@name, @filename, @path, @weight, @style);
}

объясните, пожалуйста, на примере как создать и как потом использовать.


  • 0

#4 SmetDenis

SmetDenis

Отправлено 05 June 2015 - 11:18

Примесь .font-face() - это короткий алиас для #font > .include из файла

https://github.com/s...xins.less#L1051

Пример включения FontAwesome
.font-face('FontAwesome', 'fontawesome-webfont');
файлы должны лежать в папке fonts/
  • 0
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как моно скорее!


— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.


#5 woodman

woodman

Отправлено 05 June 2015 - 13:24

Ну да, я так и предполагал, но что-то не работает.

 

1. Шрифты лежат в папке fonts

 

2. В файле template.less для меню я пишу

#cssmenu > ul > li > a {
    .font-face('Agilis', 'agilis');
}

3. В инспекторе кода есть такая запись 

@font-face {

    font-family: "Agilis";
    font-style: normal;
    font-weight: normal;
    src: url("http://destinations.chui.cf/templates/jblank/fonts/agilis.eot?#iefix") format("embedded-opentype"), url("http://destinations.chui.cf/templates/jblank/fonts/agilis.woff") format("woff"), url("http://destinations.chui.cf/templates/jblank/fonts/agilis.ttf") format("truetype"), url("http://destinations.chui.cf/templates/jblank/fonts/agilis.svg#Agilis") format("svg");
}

Шрифт так и не применился.

У товарища выше, видимо, та же проблема, ему посоветовали пути проверить.... но я не пойму, шрифт грузится, зачем пути менять, он просто не применяется... где-то туплю и не пойму где.

 


  • 0

#6 Cheren-dow

Cheren-dow

Отправлено 05 June 2015 - 13:49

lotosdima, ваш шрифт содержит все файлы?

  1. eot

  2. woff

  3. ttf

  4. svg


  • 0
Изображение
 

#7 woodman

woodman

Отправлено 05 June 2015 - 13:53

Все, кроме svg


  • 0

#8 woodman

woodman

Отправлено 05 June 2015 - 13:59

Если глянуть в скомпилированный css, то вот они есть

 

 

Прикрепленные файлы

  • Прикрепленный файл  Untitled-1.jpg   149.04К   11 Количество загрузок:

  • 0

#9 Cheren-dow

Cheren-dow

Отправлено 05 June 2015 - 14:25

Если глянуть в скомпилированный css, то вот они есть

Это делается на автомате примисью, она не проверяет есть ли файл. 

Все, кроме svg

Возможно из-за этого шрифт не отображается. 


  • 0
Изображение
 

#10 SmetDenis

SmetDenis

Отправлено 05 June 2015 - 14:29

Делается это так

// первым делом подключаем шрифт (не нужно обрамлять селектором!)
.font-face('Agilis', 'agilis');
 
// А только потом используем
html {
    font-family: "Agilis";
}
 
// или так
#cssmenu > ul > li > a {
    font-family: "Agilis";
}

по подключении под словом "Agilis" вы подразумеваете подключенный шрифт из файла agilis.*


  • 0
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как моно скорее!


— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.





Click to return to top of page in style!