web-dev-qa-db-fra.com

Importation de polices personnalisées dans Angular4

J'utilise Angular4 et j'ai un problème avec l'utilisation de ma police personnalisée. J'ai essayé d'utiliser font-face mais cela me donne l'erreur que le fichier font-est introuvable. Que dois-je faire pour inclure ce fichier afin de pouvoir l'utiliser dans mon composant?

@font-face {
  font-family: 'lcd-plain';
  src: url('/simaxx-front-end/src/main/webapp/src/assets/fonts/lcd-plain/lcd-plain.eot'); /* For IE */
  src: url('/simaxx-front-end/src/main/webapp/src/assets/fonts/lcd-plain/lcd-plain.ttf') format('truetype'), /* For Chrome and Safari */
  url('/simaxx-front-end/src/main/webapp/src/assets/fonts/lcd-plain/lcd-plain.woff') format('woff'); /* For FireFox */
  /*format("truetype"), url("/simaxx-front-end/src/main/webapp/src/assets/fonts/lcd-plain/lcd-plain.svg#LCD")*/
  /*format("svg");*/
}

svg.gauge {
  font-family: 'lcd-plain', Helvetica, Arial, sans-serif;
}
angularwebpackfont-face
7
viddrawings

je crois que le problème est de savoir comment angular retravaille les chemins dans les composants.

Ce que je fais habituellement, c'est créer un dossier de polices sous src et y mettre mes polices. Je crée ensuite un dossier de styles pour mes styles personnalisés où je mets un font.scss avec les éléments suivants:

$archistico-woff-font-path: "./fonts/archistico_bold-webfont.woff";
$archistico-woff2-font-path: "./fonts/archistico_bold-webfont.woff2";
$font-family-brand: 'archisticobold';

Dans mon dossier src, il y a un styles.scss. J'importe mes fonts.scss et j'y déclare ma police

@import "./src/styles/fonts";
@font-face {
    font-family: 'archisticobold';
    src:url($archistico-woff2-font-path) format('woff2'),
        url($archistico-woff-font-path) format('woff');
    font-weight: normal;
    font-style: normal;
}

J'espère que ça aide

12
Alberto L. Bonfiglio

Il existe la propriété src, qui peut être une URL vers un emplacement de fichier de police distant ou le nom d'une police sur l'ordinateur de l'utilisateur . Donc, si vous servez votre dossier d'actifs en tant que fichiers statiques et que vous avez le dossier des polices là-dedans, vous devriez pouvoir référencer les fichiers de police relativement à l'URL de votre application comme ceci:

@font-face {
  font-family: 'lcd-plain';
  src: url('/fonts/lcd-plain/lcd-plain.ttf') format('truetype'),
}
3
Hinrich