Question

我想使用Google字体的蒙特塞拉特。我在vendor.scss中添加了以下内容：

@import url(https://fonts.googleapis.com/css?family=Montserrat);

并在home.component.html中使用它，如下所示：

<p style="font-family: 'Montserrat', sans-serif;">Maecenas tortor nunc, tempor id massa vel, scelerisque malesuada urna. Nunc laoreet maximus velit.</p>

但它不起作用。该网页仅显示无衬线。

这样做的正确方法是什么？

Answer 1

我也使用蒙特塞拉特，但在当地。但在你的情况下，它并不重要。

我的css：

@font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 400;
   src: local('Montserrat-Regular'), url("../myfonts/Montserrat/Montserrat-Regular.ttf") format('truetype');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

在你的情况下适应url()

我在我的css上为所有这样的页面定义了它

body {
   background: #fdead6;
   font-family: "Montserrat", Montserrat, Arial, sans-serif;
   /* Montserra bug fix for IE */
   -ms-font-feature-settings: normal;
   /*color: #282828;*/
}

在您的情况下，您可以在CSS上使用课程

.myMontserratFont{
    font-family: "Montserrat", Montserrat, Arial, sans-serif;
    /* Montserra bug fix for IE */
    -ms-font-feature-settings: normal;
}

并在您的html页面上使用它：

<p class="myMontserratFont">Maecenas tortor nunc, tempor id massa vel, scelerisque malesuada urna. Nunc laoreet maximus velit.</p>

在JHipster上使用Google字体

1 个答案: