Как подключить шрифты в less

juanbrujo / demo.less

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

Как мы можем использовать @ font-face в Less

«. » но не могу придумать рабочий код.
Кто-то успешно его использовал?

У меня никогда не было проблем с @ font-face в LESS. Однако я использую реализацию PHP, поэтому предполагаю, что это недостаток в исходной. Вы можете попробовать заключить my_font в кавычки (не знаю, поможет ли это, но уж точно не ухудшит ситуацию, хе-хе). — mingos

Какую версию less.js вы используете? А в какой среде? Когда я пробую ваш код в браузере или с WinLess, он не выдает ошибок и правильно компилируется. — Mark Lagendijk

Я без проблем использую @ font-face во многих своих проектах вместе с lesscss. Однако проверьте, какую версию lesscss вы используете, поскольку некоторые старые версии не поддерживали это свойство. Вам вообще не нужно использовать технику побега. — Jonathan Miller

4 ответы

Вы пробовали заключить название семейства шрифтов в одинарные кавычки? Следующее работает отлично для меня.

Чтобы использовать шрифт в качестве миксина, попробуйте:

затем в объявлении стиля:

Да, это тоже работает для меня. Он также работает без кавычек в файле в URL-адресе и одинарных кавычек в формате. — Петух

Еще одно примечание к проголосованному ответу выше; убедитесь, что в вашем миксине нет скобок, чтобы он анализировался при компиляции в CSS.

Полный пример:

** В ваших переменных МЕНЬШЕ файла: **

// Объявляем путь к вашим шрифтам, которые вы можете изменить в переменных less file

** В ваших миксинах МЕНЬШЕ файла: **

** В ваших вложенных правилах МЕНЬШЕ файла: **

Примечание: Что за определением «.font-names» нет символа ().

How we can use @font-face in Less

«. » but can’t come up with working code.
Had someone used it successfully?

4 Answers 4

Have you tried putting the font family name in single quotes? The following works just fine for me.

To use font as a mixin, try:

then within a style declaration:

One other note to the voted answer above; make sure that your mixin does not have parenthesis so that it is parsed when compiled into CSS.

Full Example:

** In Your Variables LESS File:**

// Declare the path to your fonts that you can change in the variables less file

** In Your Mixins LESS File:**

** In Your Nested Rules LESS File:**

Note: That the «.font-names» definition does not have the () behind it.

Managing @font-face definitions with LESS

A typical @font-face definition looks something like this:

Here we are defining the font’s name, weight, style, and providing various file types for cross-browser compatibility.

If a web application is using different web fonts, or even a different weight/style (bold/italic) for the same web font, then this code has to be practically repeated several times.

This goes against DRY methodology and results in increased maintenance and management.

However, using LESS mixins we can abstract these properties making the definitions more readable.

Add the following to your LESS file:

Then, for the example above, this can be used as follows:

If we want to use 4 different type-faces for this web font then it is simply just 4 lines to write: