web-dev-qa-db-fra.com

Comment utiliser @ font-face dans Less

Dans Less , il semble presque impossible d'utiliser le sélecteur @font-face. Moins donne des erreurs lorsque j'essaie d'utiliser 

font-family: my_font

Voici comment j'essaye de l'utiliser:

@font-face {
    font-family: my_font;
    src: url('http://contest-bg.net/lg.ttf');
}
p {
    font-family: my_font, "Lucida Grande", sans-serif;
}

Il existe une évasion simple dans Less en utilisant ~"...", mais ne peut pas trouver de code de travail.
Est-ce que quelqu'un l'avait utilisé avec succès?

lessfont-face
32
sensor

Avez-vous essayé de mettre le nom de famille de la police entre guillemets? Ce qui suit fonctionne bien pour moi.

    @font-face {
        font-family: 'cblockbold';
        src: url('assets/fonts/creabbb_-webfont.eot');
        src: url('assets/fonts/creabbb_-webfont.eot?#iefix') format('embedded-opentype'),
             url('assets/fonts/creabbb_-webfont.woff') format('woff'),
             url('assets/fonts/creabbb_-webfont.ttf') format('truetype'),
             url('assets/fonts/creabbb_-webfont.svg#CreativeBlockBBBold') format('svg');
        font-weight: normal;
        font-style: normal;

    }

Pour utiliser la police comme un mix, essayez:

.ffbasic() {
    font-family: ff-basic-gothic-web-pro-1,ff-basic-gothic-web-pro-2, AppleGothic, "helvetica neue", Arial, sans-serif;
}

puis dans une déclaration de style:

.your-class {
     font-size: 14px;
     .ffbasic();    
}
32
j-man86

Une autre note à la réponse votée ci-dessus; assurez-vous que votre mixin n'a pas de parenthèses afin qu'il soit analysé lors de la compilation en CSS. 

Full Exemple:

** Dans vos variables LESS File: **

// Déclarez le chemin de vos polices que vous pouvez modifier dans le fichier moins de variables

@path-fonts:    '../fonts';

** Dans votre Mixins LESS File: **

.font-names
{

    @font-face {

        font-family: 'open-sans-light';
        src: url('@{path-fonts}/open-sans/OpenSans-Light-webfont.eot') format('enbedded-opentype'),
             url('@{path-fonts}/open-sans/OpenSans-Light.ttf') format('truetype'),
             url('@{path-fonts}/open-sans/OpenSans-Light-webfont.woff') format('woff'),
             url('@{path-fonts}/open-sans/open-sans/OpenSans-Light-webfont.svg#open-sans-light') format('svg');

    }

}

** Dans votre fichier LESS de règles imbriquées: **

@import 'your variables less file name';
@import 'your mixin less file name';

@font-face {

    .font-names;

}

Remarque: Que la définition ".font-names" ne comporte pas le () derrière.

5
Leo

Je pense que c'est parce que vous manquez le format de police. Pour ttf, c'est truetype. Si elle est manquante ou incorrecte, la police risque de ne pas être chargée.

@font-face {
  font-family: "MyFont";
  src: url("./my-font.ttf") format("truetype");
}
0
Brian Di Palma