Est-il possible d'importer des polices à partir du répertoire avec scss?

J'ai un fichier scss avec la police d'importation de mise en œuvre de cette façon:

@import url(https://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700&subset=latin-ext,cyrillic);

Je comprends que l'utilisation de CDN donne des avantages dans la mise en cache pour l'utilisateur, mais c'est interne au site et il pourrait être utilisé sur le serveur, sans accès à la wide web. Et je ne suis pas sûr que l'ordinateur de l'utilisateur aura accès à l'Internet. Donc, je veux servir les fronts avec d'autres pages de fichiers statiques.

Est-il un moyen en SCSS pour importer des polices à partir de l'un répertoire sur le serveur? Quelque chose comme:

@import dir(/path/to/fonts/file)

Ou SCSS n'a pas cette fonctionnalité?

InformationsquelleAutor Paul | 2016-05-22
  1. 20

    Comme je sais que vous ne pouvez pas importer des polices à l'aide d' @import en SCSS. Vous pouvez inclure des polices à l'aide de @font-face. Par exemple:

    @font-face {
    font-family: 'Open Sans';
    src: url(path/to/file) format(Example: 'truetype' or 'opentype' depending on the file extension of your font);
}


//USAGE
body {
    font-family: 'Open Sans', sans-serif;
}
    • C'est ce que le @import de google polices ne. Si vous mettez l'import url dans votre navigateur, c'est ce que vous voyez (un tas de @font-face's).
    InformationsquelleAutor JTrixx16
  2. 1

    c'est un peu tard, mais vous pouvez utiliser le format suivant avec libsass externe importations

    @import url("http...");

    InformationsquelleAutor Romany Saad
  3. -1

    Habituellement, il est utilisé pour importer des fragments CSS ou des fichiers et pas les polices.
    Essayez cette solution de contournement si vous êtes à l'aide de Ruby SASS/SCSS et essayez sans crochets.

    @import "https://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700&subset=latin-ext,cyrillic.css";

    J'ai mis un .css derrière elle. Fonctionne pour moi avec Ruby SASS/SCSS, mais pas avec LibSass bien.

    InformationsquelleAutor Thielicious