Come utilizzare @ font-face in meno

In Less, sembra quasi impossibile utilizzare il selettore @font-face. Meno dà errori quando si tenta di utilizzareCome utilizzare @ font-face in meno

font-family: my_font

Ecco come provo a usarlo:

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

C'è semplice di fuga in meno usando ~"..." ma non posso venire con codice funzionante.
Qualcuno l'ha usato con successo?

fonte

2011-12-01 sensor

Non ho mai avuto problemi con @ font-face in LESS. Sto usando l'implementazione PHP, quindi suppongo che sia un difetto in quello originale. Potresti provare a mettere "my_font" tra virgolette (non so se sarà d'aiuto, ma certamente non peggiorerà le cose, hehe). – mingos

Qual è l'errore? – N3dst4

Quale versione di less.js stai usando? E in quale ambiente? Quando provo il tuo codice nel browser o con WinLess non dà errori e si compila correttamente. –

Hai provato a inserire il nome della famiglia di font tra virgolette singole? Il seguente funziona bene per me.

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

    }

da usare Font come mixin, provare:

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

poi all'interno di una dichiarazione di stile:

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

fonte

2012-01-10 21:06:32

Sì, questo funziona anche per me. Funziona anche senza virgolette sul file nell'URL e le virgolette singole ancora nel formato. – Rooster

Un'altra nota alla risposta votato sopra; assicurati che il tuo mixin non abbia parentesi in modo che venga analizzato quando compilato in CSS.

Esempio completa:

** nelle variabili MENO File: **

// Dichiara il percorso dei font che è possibile modificare le variabili meno file di

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

** In Your mixin MENO 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'); 

    } 

}

** nelle regole nidificate MENO File: **

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

@font-face { 

    .font-names; 

}

Nota: che la definizione ".font nomi" non ha il() dietro di esso.

fonte

2014-08-27 22:50:38 Leo

Penso che sia perché manca il formato del carattere. Che per ttf è truetype, se manca o non è corretto il carattere potrebbe non essere caricato.

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

fonte

2018-02-16 11:37:31

Come utilizzare @ font-face in meno

risposta

Problemi correlati