如何在 SASS 中添加来自 web 的 .ttf 字体文件以在 HAML 中显示答案

【问题标题】：How to add a .ttf font file from web in SASS to be displayed in HAML如何在 SASS 中添加来自 web 的 .ttf 字体文件以在 HAML 中显示
【发布时间】：2017-06-04 11:49:09
【问题描述】：

@font-face
  font-family: MyFont
  src: url(https://.../font_name.ttf?raw=true)

$font-main: 'MyFont' , sans-serif

.some_class
font-family: $font-main

当我使用来自网络的 MyFont 时，没有任何效果。如何正确执行此操作？

【问题讨论】：

标签： html sass

【解决方案1】：

您不需要添加.ttf，只需在您的主.scss 文件的顶部包含字体@import url：

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

然后使用它：

//store it in variable first
$font-main: 'Overpass', sans-serif;
//to use it   
.selector {
   font-family: $font-main;
}

这将是浏览器兼容性的最佳选择。

如果出于某种原因您仍想加载 .ttf 文件，请在顶部的 sass 文件中设置它的名称和路径：

@font-face {
   font-family: 'myFont';
   src: url("fonts/myFont.ttf") format("truetype");
}

然后使用它：

$font-main: 'myFont', sans-serif;
.selector {
    font-family: $font-main;
}

Demo Snippet 1 - 通过常规 CSS 加载字体：

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

@import url('https://fonts.googleapis.com/css?family=Overpass');
div {
  font-family: 'Overpass', sans-serif;
}
span {
  font-family: sans-serif;
}

<div>Overpass font loaded</div>
<span>regular sans-serif</span>

Demo Snippet 2 - 在<head></head> 标签之间通过 HTML 加载字体：

<link href="https://fonts.googleapis.com/css?family=Overpass" rel="stylesheet">

div {
  font-family: 'Overpass', sans-serif;
}
span {
  font-family: sans-serif;
}

<link href="https://fonts.googleapis.com/css?family=Overpass" rel="stylesheet">
<div>Overpass font loaded</div>
<span>regular sans-serif</span>

演示字体被拍摄from here

【讨论】：

我需要使用 .ttf 文件，因为它不是标准字体。这个@font-face 也不起作用。编辑返回：Invalid CSS after "": expected selector, was "}"
robo0477，你一定是做错了什么。我通过删除不必要的示例更新了答案，并包含了一个来自 MDN @font-face 的 .ttf，确保在存储变量 $font-main: 'myFont', sans-serif; 时包含引号 - 希望有所帮助。
你是对的。从网络获取这个 .ttf 文件似乎有问题。
如果这就是您的要求，它并没有解决我的问题。它适用于本地文件，但不适用于 web 中的文件。