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

[alexmixaylov]

первый раз использую ваш шаблон, все очень нравиться!!!
Также решил учить 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');
}

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

[Cheren-dow]

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

[woodman]

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

 

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

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

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

[SmetDenis]

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

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

Пример включения FontAwesome

.font-face('FontAwesome', 'fontawesome-webfont');

файлы должны лежать в папке fonts/

[woodman]

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

 

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

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

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

 

[Cheren-dow]

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

1. eot


2. woff


3. ttf


4. svg

[woodman]

Все, кроме svg

[woodman]

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

 

 

Прикрепленные изображения

• 

[Cheren-dow]

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

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

Все, кроме svg

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

[SmetDenis]

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

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

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