Question

我正在使用MEEN Stack（Mongo，Ember，Express，Node）创建一个网站。现在，我正在尝试将Lato字体系列导入到我的项目中，因为这将是网站上所有内容的字体。我似乎遇到了这个问题，无法找到任何在线资源。关于如何做到这一点的任何想法？我已经下载了Lato字体并将文件放在我的public / assets / fonts文件夹中，但仍然有问题。如果有帮助，我也在使用粉底。

我在app.scss文件中有这个：

/* Webfont: Lato-SemiboldItalic */@font-face {
    font-family: 'LatoWebSemibold';
    src: url('fonts/Lato-SemiboldItalic.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-SemiboldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-SemiboldItalic.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-SemiboldItalic.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-SemiboldItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

nav {
    font-family: "LatoWebSemibold";
    background-color: none;
    width:150px;
    text-align:left;
    font-size:1em;
    list-style: none;
    margin: 0 0 0 0;
    padding: 0 20 30 20;
    float:left;
}

Answer 1

我认为您在网址中缺少“ / assets /”

下面是我的工作示例

@font-face {
  font-family: 'Mytupi-Bold';
  src: url(/assets/fonts/mytupibold.ttf) format('truetype');
}

Answer 2

我试图将本地字体文件导入到我的 ember 插件中。

Sheriffderek 发布了一个不错的 mixin here，但我一直看到 404 错误。

我最终通过将应用程序的名称放在字体 URL 的开头来使其工作。

$font-url: '/<app/addon-name>/fonts';
 
@mixin font-face($name) {
@font-face {
  font-family: $name;
  src: url("#{$font-url}/#{$name}.woff2") format("woff2"),
       url("#{$font-url}/#{$name}.woff") format("woff");
}


@include font-face('font-name-500');

body {
  font-family: 'font-name-500';
}

如何将字体导入Ember项目

2 个答案: