Cómo podemos usar @ font-face en Menos

En Less, parece casi imposible usar el selector @font-face. Menos da errores cuando intento utilizarCómo podemos usar @ font-face en Menos

font-family: my_font

Así es como yo trato de usarlo:

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

No es sencillo escapar en menos usando ~"..." pero no puedo subir con el código de trabajo.
¿Alguien lo usó con éxito?

Fuente

2011-12-01 sensor

Nunca he tenido problemas con @ font-face en LESS. Sin embargo, estoy usando la implementación de PHP, así que supongo que es una falla en la original. Puede intentar poner "my_font" entre comillas (no sé si lo ayudará, pero ciertamente no empeorará las cosas, jeje). – mingos

¿Cuál es el error? – N3dst4

¿Qué versión de less.js estás usando? ¿Y en qué ambiente? Cuando pruebo su código en el navegador o con WinLess, no da error y se compila correctamente. –

¿Ha intentado poner el nombre de la familia entre comillas simples? Lo siguiente funciona bien para mí.

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

    }

Para utilizar la fuente como un mixin, intente:

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

entonces dentro de una declaración de estilo:

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

Fuente

2012-01-10 21:06:32

Sí, esto también funciona para mí. También funciona sin comillas en el archivo en la url y con comillas simples aún en el formato. – Rooster

otra nota a la respuesta votado anteriormente; asegúrese de que su mixin no tenga paréntesis para que se analice cuando se compila en CSS.

Ejemplo completo:

** En las variables del archivo MENOS: **

// Declarar el camino a los tipos de letra que se puede cambiar en las variables menos de archivos

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

** In Your Mixins LESS Archivo: **

.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'); 

    } 

}

** en las reglas anidadas Archivo MENOS: **

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

@font-face { 

    .font-names; 

}

Nota: Que la definición "nombres .font" no tiene la() detrás de él.

Fuente

2014-08-27 22:50:38 Leo

Creo que es porque te falta el formato de fuente. Que para ttf es truetype, si falta o es incorrecta, la fuente podría no cargarse.

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

Fuente

2018-02-16 11:37:31

Cómo podemos usar @ font-face en Menos

Respuesta

Cuestiones relacionadas